2026-02-13

useRef

useRef란?

렌더링과 무관하게 값을 저장하거나,

DOM 요소에 직접 접근하기 위해 사용하는 React Hook

const ref =useRef(initialValue);

• { current: value } 형태의 객체 반환
• current 값은 변경 가능
• 값 변경 시 리렌더링 발생하지 않음

useRef의 주요 사용 목적

• DOM 요소 직접 접근

  = DOM 요소를 직접 제어해야 할 때

    const inputRef =useRef(null);
      
    useEffect(() => {
      inputRef.current.focus();
    }, []);
  

  • 포커스 제어
  • 스크롤 위치 이동
  • input 값 읽기

• 렌더링과 무관한 값 저장

  = 값은 유지해야 하지만, 렌더링은 필요 없을 때

    const renderCount =useRef(0);
      
    useEffect(() => {
      renderCount.current +=1;
    });
  

  • 이전 값 기억
  • 타이머 ID
  • 이전 props/state 저장

useRef의 특징

• 값 변경 → 렌더링 발생 X
• 동일한 ref 객체는 렌더링 간 유지
• 컴포넌트가 unmount 될 때까지 유지

⇒ 컴포넌트 최초 렌더링 시 한 번 초기화되고, 이후 렌더링 간 유지

useRef vs useState

왜 useRef를 쓰는가?

• state로 하면 안 되는 경우

    setCount(count +1);// 렌더링 발생
  

• ref로 처리

    countRef.current +=1;// 렌더링 없음
  

  ⇒ 렌더링이 필요 없는 값은 ref가 적절

useRef와 클로저 문제 해결

const countRef =useRef(count);
countRef.current = count;

• 최신 state 값을 항상 참조 가능
• useCallback의 stale closure 문제 해결

• ref는 렌더링과 무관하게 동일한 객체 참조

  → 항상 최신 값 가리키기 가능

useRef와 렌더링 관계

렌더링
→ useRef 객체 유지
→ current 값 변경 가능
→ 렌더링 트리거 없음

useRef 사용 시 주의점

• ref 값 변경으로 UI 변경 X
• 렌더링에 영향을 주는 값은 state 사용
• 남용하면 코드 흐름 추적 어려움

참고자료

• https://ko.react.dev/reference/react/useRef
• https://hihiha2.tistory.com/19
• https://hanghae99.spartaclub.kr/blog/react-usestate-%EB%8C%80%EC%8B%A0-useref%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0-20844