#26 [9장_1] useEffect에서 cleanup 함수를 정의하는 이유가 무엇인가요? 그리고 이 함수가 실행되는 시점은 언제인가요?

[hyeyoonS]

❓문제

• useEffect에서 cleanup 함수를 정의하는 이유가 무엇인가요? 그리고 이 함수가 실행되는 시점은 언제인가요?

🎯답변

useEffect의 cleanup 함수는 컴포넌트의 상태가 변하거나 언마운트 될 때 리액트 외부 시스템 조작으로 발생한 사이드 이펙트를 "정리" 하기 위해 사용합니다. useEffect는 리액트 외부 시스템(ex. 브라우저 API, 서드파티 라이브러리)를 조작할 때 주로 사용합니다. 이 때 리액트 내에서 관리되는 state는 리액트 Hook 규칙에 따라 컴포넌트의 라이프사이클 안에서 예측 가능하게 관리되지만, 외부 시스템은 예측 가능하게 관리할 수 없습니다. 따라서 컴포넌트가 컴포넌트의 상태가 변경될 때, 또는 컴포넌트가 언마운트 될 때 cleanup 함수를 실행하여 사이드 이펙트가 예측 가능하게 관리되도록 합니다.

useEffect 내부 로직(설정 코드)과 정리 함수가 실행되는 시점은 다음과 같습니다.

1. 컴포넌트가 마운트되면 설정 코드가 동작함
2. 의존성 배열의 요소 값이 변경되고 리렌더링이 발생하면
   • 먼저, 정리 함수가 이전의 props, state와 함께 실행됨
   • 이후, 설정 코드가 새로운 props, state와 함께 실행됨
3. 컴포넌트가 언마운트되면 정리 함수가 마지막으로 실행됨

[drizzle96]

useEffect의 cleanup 함수는 컴포넌트의 상태가 변하거나 언마운트 될 때 리액트 외부 시스템 조작으로 발생한 사이드 이펙트를 "정리" 하기 위해 사용합니다. useEffect는 리액트 외부 시스템(ex. 브라우저 API, 서드파티 라이브러리)를 조작할 때 주로 사용합니다. 이 때 리액트 내에서 관리되는 state는 리액트 Hook 규칙에 따라 컴포넌트의 라이프사이클 안에서 예측 가능하게 관리되지만, 외부 시스템은 예측 가능하게 관리할 수 없습니다. 따라서 컴포넌트가 컴포넌트의 상태가 변경될 때, 또는 컴포넌트가 언마운트 될 때 cleanup 함수를 실행하여 사이드 이펙트가 예측 가능하게 관리되도록 합니다.

useEffect 내부 로직(설정 코드)과 정리 함수가 실행되는 시점은 다음과 같습니다.

1. 컴포넌트가 마운트되면 설정 코드가 동작함
2. 의존성 배열의 요소 값이 변경되고 리렌더링이 발생하면
   • 먼저, 정리 함수가 이전의 props, state와 함께 실행됨
   • 이후, 설정 코드가 새로운 props, state와 함께 실행됨
3. 컴포넌트가 언마운트되면 정리 함수가 마지막으로 실행됨