August 8, 2025

👻 좀비 컴포넌트: Unmount 되지 않은 비동기 구독과 메모리 누수

JavaScript

React

성능

에러처리

컴포넌트

비동기처리

아키텍처

Summary

컴포넌트 unmount 시 비동기 구독을 정리하지 않아 발생하는 메모리 누수를 방지해야 합니다. useEffect 클린업 함수를 사용하여 정리하세요.

Why Wrong?

컴포넌트가 unmount된 후에도 여전히 실행 중인 비동기 작업(예: setInterval, setTimeout, RxJS Observable 구독, fetch)은 메모리 누수를 발생시키고, 예상치 못한 부작용을 초래할 수 있습니다. 컴포넌트가 더 이상 존재하지 않음에도 불구하고 이전 상태를 업데이트하려고 시도하거나, 이미 해제된 리소스를 참조하려 할 때 에러가 발생할 수 있습니다. 이러한 '좀비 컴포넌트'는 앱 성능을 저하시키고, 사용자 경험을 망칠 수 있습니다.

How to Fix?

컴포넌트가 unmount될 때 모든 비동기 작업을 정리해야 합니다. useEffect 훅의 클린업 함수를 사용하여 setInterval, setTimeout을 해제하고, RxJS Observable 구독을 취소하며, 진행 중인 fetch 요청을 중단해야 합니다. 이를 통해 메모리 누수를 방지하고, 컴포넌트가 unmount된 후 불필요한 상태 업데이트나 부작용을 방지할 수 있습니다.

Before Code (Bad)

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const intervalId = setInterval(() => {
      fetch('/api/data')
        .then(response => response.json())
        .then(newData => {
          setData(newData);
        });
    }, 1000);

    // 클린업 함수가 없음! 컴포넌트가 unmount 되어도 interval은 계속 실행됨
  }, []);

  return <div>{data ? data.value : 'Loading...'}</div>;
}

export default MyComponent;

After Code (Good)

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true; // 컴포넌트가 마운트되어 있는지 추적
    const intervalId = setInterval(() => {
      fetch('/api/data')
        .then(response => response.json())
        .then(newData => {
          if (isMounted) { // 컴포넌트가 마운트되어 있는 경우에만 상태 업데이트
            setData(newData);
          }
        });
    }, 1000);

    return () => {
      clearInterval(intervalId); // 컴포넌트 unmount 시 interval 해제
      isMounted = false; // 컴포넌트가 unmount되었음을 표시
    };
  }, []);

  return <div>{data ? data.value : 'Loading...'}</div>;
}

export default MyComponent;

`useEffect`의 클린업 함수를 사용하여 컴포넌트가 언마운트될 때 사이드 이펙트를 정리하는 방법을 설명합니다.

https://react.dev/reference/react/useEffect#cleanup-function

AbortController를 사용하여 진행 중인 fetch 요청을 중단하는 방법을 설명합니다. 컴포넌트가 언마운트될 때 미완료된 fetch 요청으로 인한 메모리 누수를 방지할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/AbortController