[useRef] 리액트의 숨은 만능 도구

728x90

useRef 

리액트에서 DOM에 직접 접근하거나 컴포넌트 간 특정 값을 공유하고 싶을 때, useRef 훅은 매우 유용한 도구입니다. 초보자에게는 조금 낯설 수 있지만, 잘 활용하면 불필요한 리렌더링을 줄이고, DOM 요소를 직접 제어하며, 타이머나 이전 상태 값을 저장하는 등 다양한 상황에서 활용할 수 있습니다.

 

---

 

1.  useRef란?

useRef 는 리액트 훅 중 하나로, 변경 가능한 참조 객체(mutable ref object)를 반환합니다. 이 객체는 .current 라는 프로퍼티를 가지고 있으며, 여기에 원하는 값을 저장하거나 DOM 요소를 참조할 수 있습니다.

const myRef = useRef(initialValue);

• myRef.current 에 값이 저장됩니다.
• .current 의 값이 변경되어도 컴포넌트는 리렌더링되지 않습니다.

주의할 점

• .current 에 값을 할당해도 리렌더링되지 않기 때문에, UI에 영향을 주는 값은 반드시 useState 를 사용해야 합니다.
• DOM 요소에 ref 를 연결할 때는 꼭 해당 엘리먼트에 ref={myRef} 형식으로 설정해야 합니다.
• useRef 는 컴포넌트가 리렌더링되더라도 참조 객체가 유지되므로, 한 번 만든 ref 는 계속 재사용됩니다.

 

---

2.  주요 사용 사례

a.  DOM 요소 직접 접근

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // DOM 요소에 직접 접근
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>포커스 주기</button>
    </>
  );
}

• ref={inputRef} 를 통해 input DOM 요소를 참조
• 버튼 클릭 시 inputRef.current.focus() 로 포커스 이동

b.  리렌더링 없이 변수 유지 (예: 타이머 ID 저장)

import { useRef, useEffect } from 'react';

function Timer() {
  const timerId = useRef(null);

  useEffect(() => {
    timerId.current = setInterval(() => {
      console.log('타이머 실행 중');
    }, 1000);

    return () => clearInterval(timerId.current);
  }, []);

  return <div>타이머 실행 중</div>;
}

• 타이머 ID를 상태가 아닌 ref 로 관리하면 불필요한 리렌더링을 방지할 수 있습니다.

c.  이전 값 기억하기

import { useEffect, useRef, useState } from 'react';

function PrevCount() {
  const [count, setCount] = useState(0);
  const prevCount = useRef();

  useEffect(() => {
    prevCount.current = count;
  }, [count]);

  return (
    <div>
      <p>현재: {count}</p>
      <p>이전: {prevCount.current}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

• 상태는 변경될 때마다 리렌더링되지만, useRef 를 사용하면 이전 값을 유지하면서 렌더링 사이에서도 접근할 수 있습니다.

 

---

3.  useState와 useRef의 차이점

항목	useState	useRef
값 변경 시 렌더링	O (리렌더링 발생)	X (렌더링 없음)
주 용도	UI 상태 관리	DOM 접근, 값 유지, 리렌더링 방지
초기값 설정	useState(초기값)	useRef(초기값)
변경 방식	setState(값) 사용	ref.current = 값 직접 변경

 

 

---

 

4.  마무리

• useRef 는 .current 속성을 가진 참조 객체를 반환하며, 리렌더링 없이 값을 유지할 수 있습니다.
• DOM 요소 직접 조작, 타이머 ID 저장, 이전 값 기억 등 다양한 상황에서 유용하게 쓰입니다.
• 상태를 저장하되 UI에 영향을 주지 않는 정보는 useRef 를 활용해 성능을 최적화할 수 있습니다.
• .current 값 변경은 렌더링에 영향을 주지 않으므로, UI 변화가 필요한 경우에는 useState 를 사용하세요.

함께 하면 좋은 자료

외부 사이트 :

• React 공식 문서 - useRef

블로그 글 :

[React Hooks] useState부터 커스텀 훅까지

 

---

반응형