단일 목적의 useEffect

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);

  // 이렇게 하면 안된다!
  useEffect(() => {
    const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
    const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);

    return () => {
      clearTimeout(timeoutA);
      clearTimeout(timeoutB);
    };
  }, [varA, varB]);

  return (
    <span>
      Var A: {varA}, Var B: {varB}
    </span>
  );
}

보다시피, 한번 상태 변경으로 varA와 varB 두 상태 변수에 업데이트가 발생하게 된다. 그래서 이 훅은 정상적으로 동작하지 않는다.
예제는 짧은 코드기 때문에 문제점이 명확하게 보이지만 더 많은 코드와 더 많은 변수를 갖고 있는 긴 함수였다면 문제를 발견하기 힘들 것이다. 그러니 옳은 방향으로 useEffect를 분리해 수정해보자.
이런 경우라면 코드는 아래와 같이 작업해야 한다.

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);

  // 옳은 방법
  useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    return () => clearTimeout(timeout);
  }, [varA]);

  useEffect(() => {
    const timeout = setTimeout(() => setVarB(varB + 2), 2000);
    return () => clearTimeout(timeout);
  }, [varB]);
  return (
    <span>
      Var A: {varA}, Var B: {varB}
    </span>
  );
}

 

[출처]https://ui.toast.com/weekly-pick/ko_20200916

리액트 useEffect 개발자가 알아야 할 네가지 팁