[TIL] React와 Next.js의 메모리 관리 - 프론트엔드에서의 릭

전통적 웹:
  페이지 A → 전체 새로고침 → 페이지 B
  → 페이지 A의 메모리가 완전히 해제됨
 
SPA (React / Next.js):
  페이지 A → 클라이언트 라우팅 → 페이지 B
  → 페이지 A의 컴포넌트는 unmount되지만
  → cleanup이 제대로 안 되면 참조가 남아서 메모리 릭

브라우저 탭의 메모리 구조:
 
V8 Heap (on-heap)                 Off-heap
┌──────────────────────┐         ┌──────────────────────────────┐
│ JS 객체               │         │ ArrayBuffer backing store    │
│ React Fiber 트리      │         │ Canvas 2D 비트맵 데이터       │
│ 클로저, Map, Set     │         │ WebGL 텍스처 / 프레임버퍼     │
│ DOM wrapper 객체      │  ───→   │ ImageBitmap 픽셀 데이터      │
│ TypedArray 메타데이터  │         │ WebAssembly.Memory           │
└──────────────────────┘         │ Video/Audio 디코딩 버퍼       │
  ↑                               │ Blob 데이터                   │
  DevTools "JS heap size"        └──────────────────────────────┘
  로 보이는 영역                    ↑
                                   DevTools에서 직접 추적하기 어려운 영역

// ❌ Canvas off-heap 릭
function ImageEditor({ src }) {
  const canvasRef = useRef(null);
 
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.onload = () => {
      canvas.width = img.width;    // 4000px
      canvas.height = img.height;  // 3000px
      ctx.drawImage(img, 0, 0);
      // 4000 × 3000 × 4 bytes (RGBA) = ~46MB가 off-heap에 할당
      // 이 46MB는 DevTools의 "JS heap size"에 잡히지 않는다
    };
    img.src = src;
 
    // cleanup이 없으면:
    // 컴포넌트가 unmount되어도 canvas DOM이 Detached 상태로 남으면
    // 46MB off-heap 비트맵도 해제되지 않음
  }, [src]);
 
  return <canvas ref={canvasRef} />;
}

// ✅ Canvas off-heap 메모리 명시적 해제
function ImageEditor({ src }) {
  const canvasRef = useRef(null);
 
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
    };
    img.src = src;
 
    return () => {
      // canvas width/height를 변경하면 비트맵이 리셋된다
      // (WHATWG HTML Spec: width/height 변경 시 output bitmap 초기화)
      // 이를 통해 브라우저가 이전 비트맵 메모리를 해제할 수 있게 된다
      canvas.width = 0;
      canvas.height = 0;
    };
  }, [src]);
 
  return <canvas ref={canvasRef} />;
}

const imageData = ctx.getImageData(0, 0, 4000, 3000);
// imageData.data = Uint8ClampedArray (V8 Heap에 메타데이터만)
// imageData.data.buffer = ArrayBuffer (off-heap에 ~46MB 바이너리)
 
// 이 변수를 참조하는 한 off-heap 46MB도 GC되지 않는다
// → 쓸 일이 끝나면 참조를 끊어야 함

const bitmap = await createImageBitmap(imageData);
// bitmap의 픽셀 데이터는 브라우저 네이티브 메모리에 저장됨
 
// 사용이 끝나면 반드시:
bitmap.close(); // 네이티브 메모리 즉시 해제
// MDN: "Releases all graphical resources associated with an ImageBitmap"
// close() 없이 GC에 맡기면 해제 시점이 불확실하다

// Three.js / R3F(React Three Fiber) 같은 WebGL 라이브러리 사용 시
function Scene() {
  const textureRef = useRef(null);
 
  useEffect(() => {
    const loader = new THREE.TextureLoader();
    loader.load('large-texture.jpg', (texture) => {
      textureRef.current = texture;
      // 4096×4096 텍스처 = ~64MB GPU 메모리 (off-heap)
    });
 
    return () => {
      // Three.js 리소스는 반드시 dispose() 해야 GPU 메모리 해제
      if (textureRef.current) {
        textureRef.current.dispose();
      }
    };
  }, []);
 
  return <mesh><meshStandardMaterial map={textureRef.current} /></mesh>;
}

// ❌ Video 요소를 정리하지 않으면 디코딩 버퍼가 off-heap에 남음
function VideoPlayer({ src }) {
  const videoRef = useRef(null);
 
  useEffect(() => {
    const video = videoRef.current;
    video.src = src;
 
    return () => {
      // 미디어 리소스 명시적 해제
      video.pause();
      video.removeAttribute('src');
      video.load(); // 이전 소스의 디코딩 버퍼를 해제한다
    };
  }, [src]);
 
  return <video ref={videoRef} />;
}

// ❌ 릭: 컴포넌트가 unmount되어도 interval이 계속 돈다
function Dashboard() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    const id = setInterval(async () => {
      const res = await fetch('/api/stats');
      setData(await res.json());
      // 이 클로저가 setData를 참조
      // → setData가 Dashboard 컴포넌트의 state updater
      // → Dashboard가 unmount되어도 interval이 도는 한
      //   setData → Dashboard의 Fiber 노드 → 전체 하위 트리가 GC되지 않음
    }, 5000);
 
    // cleanup 함수가 없다!
  }, []);
 
  return <StatsView data={data} />;
}

// ✅ cleanup 함수에서 interval 정리
function Dashboard() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    const id = setInterval(async () => {
      const res = await fetch('/api/stats');
      setData(await res.json());
    }, 5000);
 
    return () => clearInterval(id); // ← cleanup
  }, []);
 
  return <StatsView data={data} />;
}

useEffect(() => {
  // 이벤트 리스너
  const handler = () => { /* ... */ };
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler);
}, []);
 
useEffect(() => {
  // WebSocket
  const ws = new WebSocket('wss://...');
  ws.onmessage = (e) => setMessages(prev => [...prev, e.data]);
  return () => ws.close();
}, []);
 
useEffect(() => {
  // AbortController (fetch 취소)
  const controller = new AbortController();
  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(() => {}); // AbortError 무시
  return () => controller.abort();
}, [id]);
 
useEffect(() => {
  // IntersectionObserver
  const observer = new IntersectionObserver(callback, options);
  observer.observe(elementRef.current);
  return () => observer.disconnect();
}, []);

// ❌ 렌더마다 새 리스너가 등록되고 이전 것은 해제되지 않음
function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);
 
  // deps 배열 없음 → 매 렌더마다 실행
  useEffect(() => {
    window.addEventListener('scroll', () => setScrollY(window.scrollY));
    // cleanup 없음 + 매번 새 함수 등록
    // → 렌더가 100번 일어나면 scroll 리스너 100개
  });
 
  return <div>Scroll: {scrollY}</div>;
}

// ✅ 올바른 패턴
function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);
 
  useEffect(() => {
    const handler = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []); // deps: [] → mount 시 1번만 실행
 
  return <div>Scroll: {scrollY}</div>;
}

// ❌ 메시지가 영원히 쌓이는 채팅
function Chat() {
  const [messages, setMessages] = useState([]);
 
  useEffect(() => {
    const ws = new WebSocket('wss://chat.example.com');
    ws.onmessage = (e) => {
      setMessages(prev => [...prev, JSON.parse(e.data)]);
      // 채팅방에 하루 종일 있으면?
      // → messages 배열이 수만 개로 커짐
      // → 각 메시지 객체 + 이전 배열의 복사본이 계속 쌓임
    };
    return () => ws.close();
  }, []);
 
  return messages.map(m => <Message key={m.id} {...m} />);
}

// ✅ 최대 크기를 제한
function Chat() {
  const [messages, setMessages] = useState([]);
  const MAX_MESSAGES = 500;
 
  useEffect(() => {
    const ws = new WebSocket('wss://chat.example.com');
    ws.onmessage = (e) => {
      setMessages(prev => {
        const next = [...prev, JSON.parse(e.data)];
        // 500개를 넘으면 오래된 것부터 버린다
        return next.length > MAX_MESSAGES
          ? next.slice(next.length - MAX_MESSAGES)
          : next;
      });
    };
    return () => ws.close();
  }, []);
 
  // + 가상화(react-window 등)로 DOM 노드 수도 제한
  return <VirtualList items={messages} renderItem={Message} />;
}

// ❌ 차트 라이브러리 인스턴스를 정리하지 않음
function Chart({ data }) {
  const canvasRef = useRef(null);
  const chartRef = useRef(null);
 
  useEffect(() => {
    // 이전 인스턴스를 destroy하지 않고 새로 만듦
    chartRef.current = new ChartJS(canvasRef.current, {
      type: 'line',
      data: data,
    });
    // data가 바뀔 때마다 새 ChartJS 인스턴스가 생성되고
    // 이전 인스턴스는 canvas에 이벤트 리스너, 내부 캐시를 남김
  }, [data]);
 
  return <canvas ref={canvasRef} />;
}

// ✅ cleanup에서 이전 인스턴스 정리
function Chart({ data }) {
  const canvasRef = useRef(null);
 
  useEffect(() => {
    const chart = new ChartJS(canvasRef.current, {
      type: 'line',
      data: data,
    });
 
    return () => chart.destroy(); // ← 이벤트 리스너, 내부 상태 해제
  }, [data]);
 
  return <canvas ref={canvasRef} />;
}

// lib/analytics.js
// ❌ 모듈 스코프에 요청별 데이터를 쌓는 패턴
 
const events = []; // 이 배열은 프로세스가 살아있는 한 유지됨
 
export function trackEvent(event) {
  events.push({
    ...event,
    timestamp: Date.now(),
  });
  // 모든 SSR 요청이 같은 events 배열에 push
  // → 요청 10만 건이면 events에 10만 개 쌓임
  // → 프로세스 재시작까지 해제되지 않음
}

// ✅ 요청별로 격리하거나, 외부 서비스로 보내기
export function trackEvent(event) {
  // 바로 외부로 전송 (메모리에 쌓지 않음)
  fetch('https://analytics.example.com/events', {
    method: 'POST',
    body: JSON.stringify(event),
    // fire-and-forget
  }).catch(() => {});
}

// ❌ 필요 이상으로 큰 데이터를 props로 전달
export async function getServerSideProps() {
  const allProducts = await db.products.findMany();
  // 10만 개 상품 전체를 가져와서 props로 넘기면:
  // 1. 서버 메모리에 10만 개 객체 로드
  // 2. JSON.stringify로 직렬화 (메모리 2배)
  // 3. 클라이언트에 전송 후에도 서버 GC까지 메모리 유지
 
  return { props: { products: allProducts } };
}

// ✅ 필요한 만큼만, 페이지네이션으로
export async function getServerSideProps({ query }) {
  const page = parseInt(query.page) || 1;
  const products = await db.products.findMany({
    take: 20,
    skip: (page - 1) * 20,
    select: { id: true, name: true, price: true },
    // select로 필요한 필드만 가져오기
  });
 
  return { props: { products } };
}

// app/products/page.tsx (Server Component)
 
// ❌ 동시 요청이 많으면 서버 메모리 부담
export default async function ProductsPage() {
  const products = await db.products.findMany(); // 요청마다 실행
  // 동시 요청 100개 × 10만 개 상품 = 서버 메모리 폭발
 
  return <ProductList products={products} />;
}

// ✅ 캐싱 + 페이지네이션
import { unstable_cache } from 'next/cache';
 
const getProducts = unstable_cache(
  async (page) => {
    return db.products.findMany({
      take: 20,
      skip: (page - 1) * 20,
    });
  },
  ['products'],
  { revalidate: 60 } // 60초 캐시
);
 
export default async function ProductsPage({ searchParams }) {
  const products = await getProducts(searchParams.page || 1);
  // 캐시 히트 시 DB 쿼리 없이 메모리도 절약
  return <ProductList products={products} />;
}

Heap Snapshot에서 "Detached" 검색:
 
Summary view → Class filter에 "Detached" 입력
→ Detached HTMLDivElement, Detached HTMLCanvasElement 등이 나옴
→ 이것들은 DOM 트리에 없는데 JS에서 참조하고 있는 노드
→ Retainer chain을 따라가면 어떤 JS 변수가 잡고 있는지 알 수 있음

// ❌ ref로 DOM 노드를 잡고 있으면서 컴포넌트 외부에 저장
let savedElement = null; // 모듈 스코프
 
function Modal({ content }) {
  const ref = useRef(null);
 
  useEffect(() => {
    savedElement = ref.current;
    // Modal이 unmount되어도 savedElement가 DOM 노드를 참조
    // → Detached DOM 노드가 됨
  }, []);
 
  return <div ref={ref}>{content}</div>;
}

릭 확인 시나리오:
 
1. Performance Monitor 열기
2. 페이지 A로 이동 → DOM Nodes 확인 (예: 500개)
3. 페이지 B로 이동 → DOM Nodes 확인 (예: 800개)
4. 다시 페이지 A로 이동 → DOM Nodes 확인
   정상: ~500개 (B의 노드가 해제됨)
   릭:  ~1300개 (B의 노드가 남아있음)
5. A↔B를 여러 번 반복
   정상: DOM Nodes가 일정 범위에서 유지
   릭:  이동할 때마다 계속 증가

// 불필요한 리렌더링 → 불필요한 객체 생성 → GC 부담 증가
 
// ❌ 매 렌더마다 새 객체/배열 생성
function Parent() {
  return (
    <Child
      style={{ color: 'red' }}       // 매번 새 객체 → Child 리렌더
      items={data.filter(x => x.active)} // 매번 새 배열 → Child 리렌더
      onPress={() => handlePress()}   // 매번 새 함수 → Child 리렌더
    />
  );
}
 
// ✅ 메모이제이션으로 불필요한 생성 방지
function Parent() {
  const style = useMemo(() => ({ color: 'red' }), []);
  const items = useMemo(() => data.filter(x => x.active), [data]);
  const onPress = useCallback(() => handlePress(), []);
 
  return <Child style={style} items={items} onPress={onPress} />;
}

// instrumentation.ts (Next.js 15+)
// next.config.js에서 experimental.instrumentationHook: true 필요
 
export function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    // 서버 사이드에서만 실행
    setInterval(() => {
      const mem = process.memoryUsage();
      console.log(JSON.stringify({
        timestamp: new Date().toISOString(),
        heap_mb: (mem.heapUsed / 1024 / 1024).toFixed(1),
        rss_mb: (mem.rss / 1024 / 1024).toFixed(1),
        external_mb: (mem.external / 1024 / 1024).toFixed(1),
      }));
    }, 30_000);
  }
}

// 브라우저에서 메모리 모니터링 (Chrome만 지원)
if (performance.memory) {
  setInterval(() => {
    const mem = performance.memory;
    console.log({
      // V8 Heap 사용량
      usedJSHeapSize: `${(mem.usedJSHeapSize / 1024 / 1024).toFixed(1)}MB`,
      // V8 Heap 전체 크기
      totalJSHeapSize: `${(mem.totalJSHeapSize / 1024 / 1024).toFixed(1)}MB`,
      // Heap 크기 상한
      jsHeapSizeLimit: `${(mem.jsHeapSizeLimit / 1024 / 1024).toFixed(0)}MB`,
    });
  }, 10_000);
}
// 주의: performance.memory는 비표준이고 Chrome/Edge에서만 동작
// Cross-Origin-Opener-Policy 헤더가 설정된 경우에만 정확한 값을 반환

Step 1: 릭 확인
  → Performance Monitor에서 JS heap size, DOM Nodes 관찰
  → Task Manager (Shift+Esc)에서 "Memory footprint" 확인 (off-heap 포함)
  → SPA 페이지 전환을 5~10회 반복
  → 수치가 계속 올라가면 릭
 
Step 2: on-heap인지 off-heap인지 구분
  → JS heap size만 올라감 → on-heap 릭 (JS 객체, 클로저, DOM wrapper)
  → JS heap은 안정인데 Memory footprint가 올라감 → off-heap 릭 (Canvas, WebGL, Video, ArrayBuffer)
  → 둘 다 올라감 → 복합 릭
 
Step 3: 범위 좁히기
  → 어떤 페이지 전환에서 DOM Nodes가 안 줄어드는지 특정
  → Heap Snapshot에서 "Detached" 검색 (on-heap)
  → Canvas, WebGL, Video 컴포넌트의 cleanup 확인 (off-heap)
  → Allocation Timeline으로 릭 발생 시점 확인
 
Step 4: 원인 찾기
  → Heap Snapshot의 Retainer chain 추적
  → useEffect cleanup 누락 확인
  → 이벤트 리스너 등록/해제 쌍 확인
  → 외부 라이브러리 destroy()/dispose()/close() 호출 확인
  → 모듈 스코프에 데이터가 쌓이는지 확인
 
Step 4: 수정 후 검증
  → 같은 시나리오(페이지 전환 반복)로 재테스트
  → Performance Monitor에서 수치가 안정적인지 확인
  → Heap Snapshot 비교(Comparison view)로 확인