useEffect의 cleanup이 호출되는 두 가지 상황

정리 함수(cleanup function)는 useEffect 함수 내에서 반환되는 함수입니다. 컴포넌트가 언마운트될 때 정리 함수가 실행된다는 건 대부분 알고 계실겁니다.


그러나, 사실 정리 함수는 두 가지 상황에서 발생한다는 걸 알고 계셨나요? 저자에 의하면, 수백개의 워크샵을 진행했지만 정리 함수가 언제 실행되는 지 정확하게 대답한 사람은 단 한 명 밖에 없었다고 합니다.


정리 함수는 종속성 배열이 변경되어 효과를 다시 실행해야 할 때에도 호출됩니다. 즉, 의존성 배열이 변경되어 useEffect() 함수를 다시 실행하려고 할 때 호출됩니다. React는 새 이펙트를 실행하기 직전에 이전 이펙트의 정리 함수를 실행합니다.


이는 React 공식 문서의 useEffect 섹션에도 언급되어있습니다. (링크: https://react.dev/reference/react/useEffect#my-cleanup-logic-runs-even-though-my-component-didnt-unmount)


> The cleanup function runs not only during unmount, but before every re-render with changed dependencies.


자세한 내용은 아래 글을 읽어주세요.


https://reacttraining.com/blog/useEffect-cleanup

The useEffect cleanup and the two circumstances it's called.

ReactTraining.com

The useEffect cleanup and the two circumstances it's called.

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 3월 17일 오전 6:40

 • 

저장 17조회 2,393

댓글 0

    함께 읽은 게시물


    잘못된 개발자 면접 준비 방법 피하기 (+ 준비 자료)

    개발자 면접 자료 준비를 어디서부터 어떻게 해야 할지 모르겠나요? 또는 유명한 자료를 읽어도 도움 되지 않은 경우가 있으셨나요?

    ... 더 보기

     • 

    댓글 6 • 저장 961 • 조회 26,941


    프롬프트 엔지니어링이 곧 프로그래밍이다

    프롬프트 엔지니어링(Prompt Engineering)과 LoRA 트레이닝을 다루는 일이 익숙해질수록, 이 역시 연습과 숙련의 결과물이라는 사실을 실감하게 된다. 단순히 자연어를 입력하는 것이 아니라, 원하는 결과를 끌어내기 위한 1) 논리적 사고2) 설계,

    ... 더 보기

    백엔드 개발자 이력서 고민

    

    ... 더 보기

    App size 다이어트 시키기 🍣

    i

    ... 더 보기

    Diet for iOS App size (feat. App Thinning)

    iOYES

    Diet for iOS App size (feat. App Thinning)