React에서 메모리 누수 감지 및 해결 방법

개요

메모리 누수는 앱 성능 저하와 크래시로 이어진다. React 환경에서는 컴포넌트 생명주기와 비동기 처리 때문에 누수가 자주 발생한다. 이 글은 초보자도 이해하기 쉽게 원인 파악 방법과 실무 대응법을 설명한다. 핵심 키워드는 react 메모리 누수 해결, useEffect cleanup 예제, 리액트 메모리 프로파일링 이다.

메모리 누수의 흔한 원인

1. 미제거 이벤트 리스너

컴포넌트가 언마운트될 때 등록한 이벤트를 제거하지 않으면 참조가 유지돼 메모리가 해제되지 않는다.

2. 클리어되지 않은 타이머와 구독

setInterval, setTimeout, WebSocket, RxJS 구독 같은 비동기 단위가 해제되지 않으면 누수가 발생한다.

3. 비동기 요청의 취소 누락

컴포넌트가 언마운트된 후에 응답을 처리하면 메모리와 상태 업데이트 오류가 발생할 수 있다.

감지 방법: 도구와 절차

크롬 DevTools 메모리 검사

Performance 탭의 Heap snapshot 생성으로 객체 증가를 확인한다.
Allocation timeline으로 오브젝트 생성 시점을 추적한다.

React DevTools 프로파일링

리렌더 횟수와 메모리 사용의 상관관계를 확인한다. 불필요한 렌더링으로 인한 누수 단서를 찾는다.

실제 검증 절차

기준 시나리오로 앱을 사용해 메모리 스냅샷을 찍는다.
문제가 되는 동작을 반복한 뒤 다시 스냅샷을 비교한다.
증가한 객체 타입을 분석해 원인을 좁힌다.

해결 전략과 코드 예제

useEffect cleanup의 기본 패턴

useEffect에서 리스너, 타이머, 구독을 등록했다면 반환 함수로 정리한다. 아래 예제는 fetch 취소와 타이머 정리를 함께 보여준다.

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

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

  useEffect(() => {
    const controller = new AbortController();
    const id = setInterval(() => {
      // 주기적 상태 갱신 예시
    }, 10000);

    fetch('/api/data', { signal: controller.signal })
      .then(res => res.json())
      .then(json => setData(json))
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });

    return () => {
      controller.abort();
      clearInterval(id);
    };
  }, []);

  return <div>{data ? JSON.stringify(data) : '로딩 중'}</div>;
}

이벤트 리스너 제거 예제

글로벌 리스너는 반드시 제거한다.

useEffect(() => {
  function onResize() {
    // 처리
  }
  window.addEventListener('resize', onResize);
  return () => window.removeEventListener('resize', onResize);
}, []);

구독 패턴 정리

RxJS나 커스텀 이벤트는 unsubscribe 또는 해제 함수를 호출해 참조를 끊는다.

리액트 메모리 프로파일링 실전 팁

1. 작은 반복 실험

한 번의 동작보다 반복 수행 후 스냅샷을 비교하면 누수 여부 파악이 쉽다.

2. 컴포넌트 단위로 분리

의심되는 컴포넌트를 격리해 테스트하면 원인 추적이 빨라진다.

3. 힙 스냅샷 분석 팁

Detached DOM tree, listeners, closure(클로저)로 인한 참조를 확인한다.
특정 컴포넌트 인스턴스가 해제되지 않는지 조사한다.

체크리스트

useEffect의 반환 함수로 모든 리소스 정리 확인
setInterval, setTimeout 정리 여부 확인
fetch, XMLHttpRequest 중단 처리(AbortController) 적용
구독(unsubscribe)과 removeEventListener 호출 확인
큰 데이터는 필요시 메모리 맵으로 분리하거나 스트리밍 사용

마무리

메모리 누수는 작은 실수에서 시작한다. 하지만 검사 도구와 규칙적인 정리 패턴으로 대부분 해결된다. 먼저 리스너와 타이머, 비동기 요청을 점검한다. 그다음 DevTools로 프로파일링해 문제 영역을 좁힌다. 마지막으로 useEffect cleanup 예제처럼 반환 함수를 일관되게 적용하면 안정성이 크게 개선된다. 이 과정을 통해 react 메모리 누수 해결과 리액트 메모리 프로파일링이 더 수월해진다.

목차

개요