useEffect: clean-up 함수의 필요성

공부를 하면서 개인적으로 궁금했던 부분을 해결하거나, 스터디를 통해 배운 내용을 정리합니다.

clean-up

• clean-up 함수는 useEffect Hook 내에서 return되는 함수
• 컴포넌트가 사라질 때(unmount 시점), 특정 값이 변경되기 직전(deps update 직전)에 실행할 작업을 지정

  useEffect(() => {
    // mount 시점, deps update 시점에 실행할 작업 (componentDidMount)
    return () => { 
      //unmount 시점, deps update 직전에 실행할 작업 (componentWillUnmount)
    };
  }, [deps]);

React가 effect를 정리(clean-up)해야하는 시점은 언제일까?

주로 컴포넌트가 언마운트되거나 업데이트되기 전에 이전에 등록한 효과들을 정리하는 데 사용

clean-up이 버그를 방지하는 데에 어떻게 도움이 될까?

메모리 누수와 같은 문제를 방지하는 데 도움.

EX) 컴포넌트가 언마운트되기 전에 이벤트 리스너를 제거하지 않으면, 해당 컴포넌트가 다시 마운트될 때 이전에 등록한 이벤트 리스너가 여전히 살아있음

⇒ 불필요한 이벤트 핸들링이 발생하거나 메모리 누수가 발생

⇒ clean-up 함수를 사용하여 컴포넌트가 소멸되기 전에 정리 작업을 수행하여 이러한 문제 방지

⇒ 코드의 안정성을 높임. 예측 가능한 동작을 유지하는 데 도움을 줌

Using the Effect Hook – React

문서를 보면, 실제로 간단한 예시를 들면서 버그를 방지하는 데 도움이 되는 이유를 설명함