TIL-58 React 의존성 배열

의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수다. 의존성 배열의 내용이 변경됐을 때 부수 효과 함수가 실행된다.

의존성 배열에 입력해야 할 값을 입력하지 않으면 오래된 값을 참조하는 문제가 발생한다.

function MyComponent() {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  useEffect(()=>{
    const id = setInterval(()=> console.log(value1, value2), 1000);
    return () => clearInterval(id);
  }, [value1]);
  return (
    <div>
      <button onClick={()=>{ setValue1(value1 + 1)}>value1 증가
        </button>
      <button onClick={()=>{ setValue1(value2 + 1)}>value2 증가
        </button>
    </div>
  );
}

value2를 의존성 배열에 넣지 않았다. 따라서 value2가 변경돼도 부수 효과 함수는 갱신되지 않으며 value2가 변경되기 전에 등록된 부수 효과 함수가 계속 사용된다. 컴포넌트 함수가 실행될 때마다 부수 효과 함수가 생성되고, 함수는 생성될 당시의 변수를 참조한다. 같은 value2 변수라고 하더라도 컴포넌트 함수가 실행될 때마다 새로운 메모리 공간을 가진다. 즉, 부수 효과 함수는 함수가 생성된 시전의 value2를 참조하므로 예전에 생성된 부수 효과 함수는 예전 value2를 참조하는 것이다.