TIL 6/19 useEffect return

useEffect에 대한 개념이 혼동되었다.

 

 clean up function이라고 부르는 useEffect의 return값이 실행되는 시점이

 

언마운트되는 시점 이라고 생각했는데 어떤 문서엔 렌더링 될 때 useEffect 안의 내용이 실행되기 전에 return 값이 실행된다고 했다.

 

알고보니 dependency array(deps)의 값이 비어 있는 경우엔 언마운트 될 때 cleanup함수가 호출된다.

 

deps에 특정값이 지정되어 있는 경우 언마운트시에 호출되고, update되기 직전에도 호출 된다.

 

userEffect의 실행시점을 다시한번 살펴보면 

 

deps에 빈배열이 들어가있는 경우엔  mount될 때만 실행된다.

 

아예 생략이 되어있는 경우엔 마운트 될 때와 컴포넌트가 리렌더링 될 때마다 호출된다.

 

어떤 값이 deps에 들어가 있다면 마운트 될 때 해당 값이 변경되면 실행된다.

 

useEffect를 통해 컴포넌트가 마운트 될 때 이벤트를 추가하였다면 컴포넌트가 언마운트 될 때 이벤트를 삭제 해줘야한다.

 

그렇지 않으면 컴포넌트가 리렌더링 될 때마다 새로운 이벤트가 바인딩되어 메모리 누수가 발생할 수 있다.