useRef

useRef

DOM 요소나 변수 값을 저장하거나 React 컴포넌트가 리렌더링되어도 값을 유지할 수 있도록 해주는 훅입니다.

const myRef = useRef(initialValue);

myRef.current — 실제 저장값

---

DOM 접근

DOM 요소에 연결해서 focus, scroll 등 직접 제어 가능

import { useRef, useEffect } from "react";

function InputFocus() {
  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    inputRef.current?.focus(); // 마운트되자마자 포커스
  }, []);

  return <input ref={inputRef} type="text" />;
}

---

외부 라이브러리 인스턴스 저장

외부 라이브러리의 인스턴스에 접근 가능

import { Swiper } from "swiper";
import { useRef, useEffect } from "react";

const swiperRef = useRef<Swiper | null>(null);

<Swiper onSwiper={(swiper) => (swiperRef.current = swiper)} />;

// 이후에 인스턴스 메서드 사용 가능
swiperRef.current?.slideTo(0);

---

값 유지

리렌더링 없이 값 유지

function Timer() {
  const count = useRef(0);

  useEffect(() => {
    const interval = setInterval(() => {
      count.current += 1;
      console.log(count.current); // 최신 값 유지
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Check the console</div>;
}

useRef는 값만 업데이트하므로 성능에 유리

---

요약

• .current에 값을 저장하거나 참조 가능
• .current 값을 바꿔도 컴포넌트는 다시 렌더되지 않음
• 접근 HTML 요소 직접 제어 가능
• 외부 인스턴스 라이브러리 인스턴스를 보관해서 메서드 호출 가능