[React] - useEffect의 클린업이란 ?

🚪 먼저 알아야할 개념

컴포넌트 언마운트란 ?

컴포넌트 언마운트(Unmount)는 React 컴포넌트가 DOM에서 제거되는 상태를 의미합니다. 즉, 컴포넌트가 화면에서 사라지거나 더 이상 필요 없을 때 발생합니다.

일반적으로 컴포넌트가 언마운트되는 경우 💭

• 사용자가 페이지를 이동할 때
• 조건부 렌더링을 통해 컴포넌트가 숨겨지거나 제거될 때
• 부모 컴포넌트가 언마운트될 때

 

이벤트 리스너와 클린업

이벤트 리스너는 브라우저에서 특정 이벤트(예: 클릭, 리사이즈, 입력 등)가 발생할 때 호출되는 함수입니다. 예를 들어, window.addEventListener('resize', handleResize)는 브라우저 창의 크기가 조정될 때마다 handleResize 함수를 호출합니다.

 

왜 클린업이 필요한가?

컴포넌트가 언마운트되었음에도 불구하고 이벤트 리스너가 계속 남아있다면 다음과 같은 문제가 발생할 수 있습니다:

1. 불필요한 함수 호출: 컴포넌트가 언마운트되었지만 이벤트 리스너가 계속 남아 있으면, 브라우저가 여전히 이벤트를 감지하고 관련된 함수를 호출할 수 있습니다. 이로 인해 비효율적인 함수 호출이 발생하고, 이는 성능에 영향을 줄 수 있습니다.
2. 메모리 누수: 이벤트 리스너가 컴포넌트가 제거된 후에도 메모리에 남아 있으면 메모리 누수가 발생할 수 있습니다. 브라우저는 이벤트 리스너와 관련된 메모리를 해제하지 않으므로, 장기적으로는 메모리 사용량이 증가할 수 있습니다.

예시 ) 버튼 클릭 이벤트 리스너

import React, { useEffect } from 'react';

const ExampleComponent = () => {
    useEffect(() => { 
        const handleClick = () => { console.log('Button clicked'); 
    }; // 버튼 클릭 이벤트 리스너 등록 window.addEventListener('click', handleClick); // 컴포넌트가 언마운트되면 이벤트 리스너 제거 return () => { window.removeEventListener('click', handleClick); }; }, []); return ( <div> <p>Click anywhere on the window to see the log.</p> </div> ); };
export default ExampleComponent;

 

설명

1. 컴포넌트 마운트: ExampleComponent가 렌더링되면, useEffect가 실행되고 window.addEventListener('click', handleClick)가 호출됩니다. 이제 브라우저의 클릭 이벤트가 발생할 때마다 handleClick 함수가 호출됩니다.
2. 컴포넌트 언마운트: 사용자가 페이지를 떠나거나 ExampleComponent가 조건부 렌더링에 의해 제거되면, useEffect의 클린업 함수가 호출됩니다. window.removeEventListener('click', handleClick)가 실행되어 클릭 이벤트 리스너가 제거됩니다.
3. 문제 발생: 만약 클린업 함수가 없었다면, ExampleComponent가 언마운트된 후에도 클릭 이벤트가 계속 감지되고 handleClick 함수가 호출되며, 브라우저는 여전히 handleClick 함수에 대한 참조를 유지합니다.
   • 불필요한 로그 출력: 페이지가 사라졌음에도 불구하고 콘솔에 로그가 계속 출력됩니다.
   • 메모리 누수: 이벤트 리스너와 관련된 메모리가 해제되지 않아 메모리 누수가 발생할 수 있습니다.

이런 문제를 방지하기 위해 컴포넌트가 언마운트되기 전에 이벤트 리스너를 제거하는 것이 좋다
이를 통해 메모리 누수와 성능 문제를 방지할 수 있다 ! 👍