effectcleanup

useEffect cleanup은 언제 필요한지 설명해 주세요

예상 시간
6분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

cleanup은 언제 호출되나요?

부가 설명

useEffect(() => {
  function handleResize() {
    setWidth(window.innerWidth);
  }
 
  window.addEventListener("resize", handleResize);
 
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

listener를 등록했으니 cleanup에서 제거합니다.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

timer도 마찬가지로 정리해야 합니다.

cleanup은 “component가 죽을 때만 실행되는 함수”가 아닙니다. dependency가 바뀌면 React는 이전 effect를 정리한 뒤 새 effect를 실행합니다. 그래서 특정 id로 subscription을 연결하는 effect에서는 id가 바뀔 때 이전 subscription을 끊어야 합니다.

React Strict Mode 개발 환경에서는 effect와 cleanup이 한 번 더 실행되는 것처럼 보일 수 있습니다. cleanup이 제대로 작성됐는지 드러내기 위한 동작으로 이해하면 됩니다.

한 줄 정리

useEffect cleanup은 effect가 만든 외부 연결을 다음 effect나 unmount 전에 정리하는 함수입니다.