[251224] TIL

Today I Learned (2025-12-24)

리액트에서 변수 관리 시, useRef와 let 사용 차이점

가장 큰 차이점은 리렌더링 시 동작 방식임

let

• 컴포넌트가 리렌더링 될 때마다 초기화 되어서 이전 값을 잃어버림

useRef

• 리렌더링 되어도 값은 유지됨
• 상태가 변경되더라도 리렌더링이 유발되지 않음

실제 사용 사례

useRef

• DOM 요소에 접근할 때 사용
• setTimeout, setInterval 의 ID 저장할 때도 유용

useEffect(() => {
  const intervalId = window.setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => {
    clearInterval(intervalId);
  };
}, []);

• 이렇게 하면 조건부로 시작/중지하거나 이벤트 핸들러에서 clear 해야 할 때 한계가 있음

"use client";

import { useEffect, useRef } from "react";

export function TimerExample() {
  const intervalRef = (useRef < number) | (null > null);

  useEffect(() => {
    intervalRef.current = window.setInterval(() => {
      console.log("tick");
    }, 1000);

    return () => {
      if (intervalRef.current !== null) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    };
  }, []);

  return <div>콘솔을 확인하세요</div>;
}

• 위 처럼하면 리렌더링되어도 유지, cleanup 시 정확한 접근 가능
• state 처럼 리렌더링을 유발하지 않음

컴포넌트 외부에서 let 선언하면 리렌더링 영향을 안 받지 않나?

1. 컴포넌트 외부의 변수는 모든 컴포넌트 인스턴스가 공유하게 됨
   • 같은 컴포넌트를 여러 번 사용 할 때 예기치 못한 동작이 발생할 수도 있다.

let count = 0;

function Counter() {
  count++;
  return <div>{count}</div>;
}

<Timer />
<Timer />

• 같은 컴포넌트 2개가 같은 count 를 사용함
• useRef는 컴포넌트 인스턴스마다 별도 저장 공간을 사용함, 리액트가 내부적으로 인스턴스별로 관리함

1. 전역 변수처럼 동작하기 때문에 코드의 예측 가능성과 유지보수성이 떨어짐
2. 리액트 원칙 중 하나인 단방향 데이터 흐름에 위배됨
   • 상태관리가 리액트 생명주기 밖에서 이루어지기 때문임
   • 상태 관리 할 때는 useState나 useRef를 쓰는 것이 좋다.