🗑️ 이벤트 리스너 누수: 메모리 누수와 성능 저하의 주범

Why Wrong?

How to Fix?

import React, { useEffect, useState } from 'react';

function ResizableBox() {
  const [width, setWidth] = useState(window.innerWidth);

  // ❌ 문제: 컴포넌트가 언마운트될 때 이벤트 리스너가 제거되지 않습니다.
  // 이 컴포넌트 인스턴스가 DOM에서 사라져도, window resize 이벤트 리스너는 계속 남아있습니다.
  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
      console.log('Window resized!');
    };

    window.addEventListener('resize', handleResize);
    // return () => window.removeEventListener('resize', handleResize); // 이 클린업 로직이 누락됨
  }, []); // 빈 의존성 배열로 컴포넌트 마운트 시 한 번만 실행되지만, 언마운트 시 클린업이 없음

  return (
    <div style={{ border: '1px solid black', padding: '20px', margin: '20px' }}>
      <h1>현재 창 너비: {width}px</h1>
      <p>창 크기를 조절해보세요.</p>
    </div>
  );
}

export default ResizableBox;

// 이 컴포넌트를 여러 번 마운트하고 언마운트하면,
// `handleResize` 함수가 계속해서 메모리에 남아있고,
// window resize 이벤트 발생 시 이전에 마운트되었던 모든 컴포넌트의 handleResize 함수가 호출되어
// 불필요한 연산과 메모리 낭비를 초래합니다.

import React, { useEffect, useState } from 'react';

function ResizableBox() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
      console.log('Window resized!');
    };

    // ✅ 올바른 해결책: 이벤트 리스너를 추가하고, 컴포넌트 언마운트 시 제거합니다.
    window.addEventListener('resize', handleResize);

    // useEffect의 클린업 함수는 컴포넌트가 언마운트되거나
    // 다음 렌더링 시 의존성 배열이 변경되기 전에 호출됩니다.
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 빈 의존성 배열로 컴포넌트 마운트 시 한 번만 실행 및 언마운트 시 클린업 보장

  return (
    <div style={{ border: '1px solid black', padding: '20px', margin: '20px' }}>
      <h1>현재 창 너비: {width}px</h1>
      <p>창 크기를 조절해보세요.</p>
    </div>
  );
}

export default ResizableBox;

// 이제 이 컴포넌트를 마운트/언마운트해도
// 메모리 누수 없이 깔끔하게 관리되며, 불필요한 함수 호출도 방지됩니다.

You Might Also Like