React useEffect 클린업 함수는 왜 필요한가요?

React의 useEffect는 컴포넌트의 생명주기에 따라 외부 API 연동, 수동적인 DOM 조작, 타이머 설정 등의 부수 효과(Side Effect)를 처리하는 강력한 훅입니다. 여기서 '클린업(Cleanup)' 함수는 useEffect 내부에서 return되는 함수로, 등록된 부수 효과를 안전하게 종료하거나 해제하는 역할을 수행합니다. 주로 이벤트 리스너 제거, 웹소켓 구독 해제, setTimeout/setInterval 중단과 같은 정리 작업이 이곳에서 이루어집니다.

많은 개발자가 클린업 함수는 컴포넌트가 화면에서 사라질 때(Unmount)만 실행된다고 오해하곤 합니다. 하지만 실제로는 의존성 배열에 포함된 값이 변경되어 useEffect가 재실행될 때마다, 새로운 효과가 적용되기 직전에 이전 차례의 효과를 정리하기 위해 먼저 호출됩니다. 즉, '이전 상태의 정리'와 '현재 상태의 설정'이 순차적으로 일어나며 애플리케이션의 상태 일관성을 유지합니다. 이러한 메커니즘은 React가 동적인 UI를 효율적으로 관리하는 핵심 방식 중 하나입니다.

만약 클린업 함수를 적절히 구현하지 않는다면 심각한 성능 저하와 버그를 초래할 수 있습니다. 예를 들어, 전역 윈도우 객체에 resize 이벤트를 등록하고 정리하지 않으면 컴포넌트가 다시 그려질 때마다 리스너가 기하급수적으로 늘어나는 '이벤트 리스너 누수'가 발생합니다. 또한, 이미 사라진 컴포넌트의 state를 업데이트하려다 발생하는 'Memory Leak' 경고나, 이전 네트워크 요청의 결과가 늦게 도착해 현재 화면의 데이터와 충돌하는 'Race Condition' 문제도 클린업 함수를 통해 해결할 수 있는 대표적인 실무 사례입니다.