[Hooks] useEffect의 return값 (useEffect clean-up)

useEffect clean-up 이라고 함.

 

dependency없는 useEffect의 경우 return해주는 함수가

컴포넌트 componentWillUnmount 함수와 같다

 

만약 dependency가 있는 경우, 매번 해당 useEffect가 실행되기 전에 clean-up이 실행된다.

React document에선 clean-up의 예시를 어떻게 들고 있냐면,

현재 subscribe된 대상을 A에서 B로 바뀌면서 useEffect가 실행될 때, 기존의 A를 unsubscribe하고 B를 새로 등록하기 위한 기능이라고 설명한다.

 

난 timer의 setInterval을 해제하는 용도로 사용했다.

didStart state가 바뀔 때마다 countDown에 해당하는 useEffect가 실행되며, 자동으로 clean-up clearInterval이 실행되며 타이머를 멈추는 기능이다.

 

 

https://jsdev.kr/t/react-useeffect-return/5676

React 에서 useEffect의 return 호출 조건이 이해가 안됩니다!