React - useRef

useRef는 **React의 훅(hook)**으로, DOM 요소를 직접 참조하거나 컴포넌트의 상태를 저장할 때 사용됩니다.
일반적인 상태(useState)와 달리 컴포넌트가 리렌더링돼도 값이 초기화되지 않으며, 리렌더링을 트리거하지 않는 점이 특징입니다.

---

useRef 기본 사용법

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null); // 초기 값: null

  const handleFocus = () => {
    inputRef.current.focus(); // input 요소에 포커스
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

코드 동작

1. useRef(null): 초기값이 null인 ref 객체를 생성합니다.
2. ref={inputRef}: 해당 input 요소에 inputRef를 연결합니다.
3. inputRef.current.focus(): 버튼 클릭 시 input에 포커스를 설정합니다.

---

useRef의 주요 특징과 사용처

1. DOM 요소 참조

• 특정 DOM 요소에 직접 접근해 포커스, 스크롤 등 조작할 때 사용됩니다.
• React는 DOM을 직접 조작하는 것을 지양하지만, 일부 경우(포커스, 애니메이션)에는 필요합니다.

예시: 버튼 클릭 시 특정 요소로 스크롤하기

const divRef = useRef(null);

const scrollToDiv = () => {
  divRef.current.scrollIntoView({ behavior: 'smooth' });
};

 

2. 컴포넌트 리렌더링과 상관없는 값 저장

• useState와 달리 값이 변경되어도 리렌더링을 발생시키지 않습니다.
• 예를 들어, 컴포넌트 내에서 렌더와 상관없는 변수를 관리할 때 유용합니다.

예시: 렌더와 관계없는 타이머 ID 저장

const timerRef = useRef();

useEffect(() => {
  timerRef.current = setInterval(() => {
    console.log('Interval running...');
  }, 1000);

  return () => clearInterval(timerRef.current); // 정리
}, []);

 

3. 이전 값 기억하기

• useRef를 사용해 컴포넌트의 이전 값을 기억할 수 있습니다.

예시: 이전 상태를 저장하고 비교

const previousCount = useRef();

useEffect(() => {
  previousCount.current = count; // 현재 count를 ref에 저장
}, [count]);

console.log('Previous count:', previousCount.current); // 이전 count 값

---

useRef와 useState의 차이점

useRef	useState
값이 바뀌어도 리렌더링되지 않음	값이 바뀌면 컴포넌트가 리렌더링됨
주로 DOM 참조나 타이머 같은 외부 요소 관리	주로 상태 관리에 사용
초기화되지 않고 컴포넌트 생애 주기 동안 유지	상태가 업데이트되면 새로운 값이 렌더됨

---

정리

useRef는 컴포넌트가 리렌더링될 때도 유지되는 변수를 저장하거나, DOM 요소에 직접 접근해야 할 때 사용됩니다. 리렌더링을 트리거하지 않는 값이 필요할 때 유용하며, 타이머, 이전 값 저장, DOM 조작 등 다양한 상황에서 활용됩니다.