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