The useEffect cleanup and the two circumstances it's called. 이 문서는 React의 useEffect 훅에서 cleanup 함수의 세부 정보를 탐구하고 호출되는 두 가지 상황을 설명합니다. 첫 번째 상황은 컴포넌트가 언마운트될 때입니다. 효과 함수가 호출되면 컴포넌트가 언마운트될 때 실행되는 cleanup 함수가 반환됩니다. 이는 컴포넌트가 DOM에서 제거되기 전에 일부 작업을 수행해야 할 때 유용합니다. cleanup 함수가 호출되는 두 번째 상황은 의존성 배열이 변경되고 효과가 다시 실행되어야 하는 경우입니다. useEffect 훅을 사용하면 효과 함수가 의존하는 변수를 보유하는 의존성 배열을 지정할 수 있습니다. 의존성 배열의 변수 중 하나라도 변경되면 효과 함수가 다시 실행됩니다. 그러나 새로운 효과 함수가 실행되기 전에 이전 효과 함수의 cleanup 함수가 호출됩니다. 이것은 이전 효과에서 발생한 메모리 누수나 의도하지 않은 부작용이 없도록 보장하는 중요한 역할을 합니다. 이 문서는 cleanup 함수가 필요한 상황의 예를 제공합니다. 한 가지 이유는 경합 조건을 방지하기 위해서입니다. 예를 들어, 사용자 정보를 표시하는 'UserProfile' 컴포넌트가 있다고 가정해보십시오. 빠르게 다른 사용자를 클릭하면 매번 새로운 'userId' prop과 함께 컴포넌트가 다시 렌더링됩니다. 사용자 정보를 검색하는 네트워크 요청이 우리가 보낸 순서와 다른 순서로 반환되면 잘못된 사용자를 표시할 수 있습니다. cleanup 함수를 사용하여 새로운 효과가 실행될 때 이전 효과가 취소되도록 보장할 수 있습니다. 전반적으로 useEffect 훅에서 cleanup 함수를 이해하는 것은 효율적이고 안전한 React 코드를 작성하는 데 필수적입니다. 이 문서는 이 개념을 쉽게 이해할 수 있도록 명확한 설명과 예제를 제공합니다