[React] Event listener

event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!)

그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

 

useEffect(() => {} , [])

위 코드에서 []를 dependancy array(의존성 배열)이라고 한다.

useEffect는 첫번째 랜더링 시에는 화살표 함수만을 실행한다.

이후 두번째 랜더링(리랜더링)부터는 의존성 배열에 변화가 있는지 확인을 한 뒤 바뀐게 있을때만 화살표 함수를 실행한다.

 

클래스형 컴포넌트에서는 dom 요소가 있을때만 이벤트가 발생했다.

함수형에서 이를 종료하려면 클래스형과 동일한 방식으로 진행하면 된다.

클래스형 컴포넌트의 componentDidMount하는 곳에 이벤트 리스너를 붙여야하는데, 곧 useEffect안에서 실행을 하면된다.