useEffect 의존성 배열과 메모리 누수

useEffect?

useEffect는 리액트 컴포넌트에서 상태나 UI 변경 외에 추가적으로 필요한 작업을 처리하기 위한 훅입니다.

• 사용 사례:

  • 데이터를 가져오기(API 호출)
  • 이벤트 등록 및 제거
  • 타이머 설정

• useEffect는 기본적으로 컴포넌트가 렌더링된 후 실행됩니다.

  useEffect(() => {
    // 여기에 필요한 작업을 작성
  }, [dependencies]); // 의존성 배열
  

의존성 배열의 역할

• 의존성 배열은 useEffect가 언제 다시 실행될지를 결정합니다.
  • 빈 배열 []: 마운트(초기 렌더링)에만 실행.
  • 특정 값이 들어간 배열 [value]: 해당 값이 변경될 때만 실행.
  • 의존성 배열이 없으면 매 렌더링마다 실행됩니다.

메모리 누수란?

• 컴포넌트가 언마운트되거나 리렌더링되더라도 내부에서 실행 중인 작업이 종료되지 않고 계속 실행되는 문제.
• 예: setInterval, addEventListener 같은 작업이 계속 남아 리소스를 점유.
• 이런 문제를 방치하면 성능 저하로 이어질 수 있습니다.

문제 상황 예시

"use client";

import { useEffect, useState } from "react";

export default function UseEffectWithMemoryLeakPage() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 메모리 누수 발생
    setInterval(() => {
      alert(`현재 카운트는 몇 일까요? ${count}`);
    }, 3000);
  }, [count]);

  const onClickCountUp = () => setCount(count + 1);

  return <button onClick={onClickCountUp}>카운트 올리기</button>;
}

• 의존성 배열에 count가 포함되어 있으므로, count가 변경될 때마다 새로운 setInterval 생성.
• 기존의 setInterval은 정리되지 않고 계속 실행됩니다.
• 결과: 알림이 중복 실행 -> 메모리 누수 발생.