React의 useEffect 훅(hook)은 side effect(부수 효과)를 실행하는 데 사용됩니다. side effect는 데이터를 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 변경하는 등과 같은 작업을 포함할 수 있습니다.
useEffect에서 반환하는 함수는 "cleanup function"이라고 부르며, 이 함수는 useEffect에서 설정된 side effect를 청소하는 데 사용됩니다. 이러한 cleanup function이 필요한 주요 이유는 세 가지가 있습니다.
1. 메모리 누수 방지
cleanup 함수는 컴포넌트가 언마운트(unmount)될 때 호출됩니다. 이것은 컴포넌트가 사라질 때 컴포넌트가 생성했던 side effect를 정리하는 데 매우 중요합니다. 예를 들어, 컴포넌트가 WebSocket 연결을 설정하거나 setInterval을 사용하여 반복 작업을 설정한 경우, 컴포넌트가 언마운트되면 이들 작업을 정리하지 않으면 메모리 누수가 발생할 수 있습니다.
2. 올바른 상태 유지
cleanup 함수는 새로운 side effect를 실행하기 전에도 호출됩니다. 이는 useEffect의 의존성 배열(dependency array)에 있는 값이 변경될 때마다 발생합니다. 이로 인해 이전에 설정된 side effect를 청소하고, 새로운 side effect를 실행하여 최신의 상태를 반영할 수 있습니다.
3. 이벤트 핸들러 제거
이벤트 리스너는 특히 주의해야 하는데, 컴포넌트가 언마운트되었을 때 이벤트 리스너를 제거하지 않으면, 이벤트 리스너가 콜백 함수를 계속 호출하려고 시도하면서 문제가 발생할 수 있습니다. 컴포넌트가 언마운트된 후에는 해당 컴포넌트에 접근하면 안 되기 때문에, 이벤트 리스너를 제거하지 않으면 존재하지 않는 컴포넌트에 접근하는 문제가 발생합니다.
결론적으로, cleanup 함수는 메모리 누수를 방지하고, 컴포넌트의 상태를 올바르게 유지하며, 필요 없어진 이벤트 핸들러를 제거하는데 필요합니다.
