useEffect 안에서의 리턴??

인스타 클론하다가 또 다시 배운 기능이다. useEffect안에서 리턴을 한다??
찾아보니 componentWillUnmount와 같은 효과를 낸다는 것이다.

• useEffect안에서 return을 하면 정리의 개념으로 실행이 된다. 그전에 useEffect안에서 실행되었던 코드가 clean-up되고 새로 무언가를 다시 그리고 싶을때 return을 사용한다. setInterval 함수같은 경우가 대표적이다. 코드를 보자.

function startTimer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(count + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}

이때 dependency로 빈 array를 pass한다면 mount할때 한 번만 실행한다. 그럼 timer가 시작된다. 그리고, unmount할때 return값을 실행하면서 timer가 clear된다.

참고자료

• https://ko.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often
• https://www.youtube.com/watch?v=0ZJgIjIuY7U