useEffect 안에서의 리턴??

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

• useEffect안에서 return을 하면 정리의 개념으로 실행이 된다. useEffect의 두번째 argument로 들어가는 array 값이 변하면 useEffect는 다시 콜백을 실행하는데 그때 그전 콜백의 리턴값을 실행하는 것이다.

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

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

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

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

디바운스처럼 input value가 바뀔때마다 cleartime을 실행하고 싶을때도 useEffect를 사용하면 된다.

import { useState, useEffect } from "react";

const useDebounce = (value: string, delay = 300) => {
  const [debounceValue, setDebounceValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebounceValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return { debounceValue };
};

export default useDebounce;

만약 등록된 이벤트를 제거하고 싶을 경우, 화살표함수를 이벤트에 넘겨주는것이 아니라 함수를 변수에 저장해두고 넘겨줘야함. reference가 같은것을 사용해야한다.

  useEffect(() => {
    const onKeyDown = (evt: KeyboardEvent) => {
      if (evt.code === "KeyQ") {
        setGameOver(true);
      }
    };

    window.addEventListener("keydown", onKeyDown);

    return () => {
      window.removeEventListener("keydown", onKeyDown);
    };
  }, []);

참고자료

• 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