React의 useRef 훅 완벽 가이드

 

React의 훅(Hook) 중 useRef는 초기 학습자부터 숙련 개발자까지 자주 사용하는 필수 도구입니다. 이번 블로그에서는 useRef 훅의 기본 개념부터 다양한 활용 사례까지 상세히 설명하며, 실제 프로젝트에서 바로 적용할 수 있는 예제를 함께 살펴보겠습니다.

---

useRef란 무엇인가요?

useRef는 React에서 DOM 요소를 직접 제어하거나, 컴포넌트의 렌더링 간 상태를 유지해야 할 때 사용하는 훅입니다. 다음과 같은 기능을 제공합니다:

1. DOM 접근: 특정 DOM 요소에 직접 접근하여 조작할 수 있습니다.
2. 값 저장: 렌더링 간에 값을 유지하지만, 값이 변경되어도 컴포넌트를 다시 렌더링하지 않습니다.

useRef의 기본적인 사용법은 아래와 같습니다:

import React, { useRef } from "react";

function MyComponent() {
  const myRef = useRef(null);

  return <div ref={myRef}>Hello, useRef!</div>;
}

---

useRef의 주요 특징

1. 초기값 설정 가능:

   const myRef = useRef(0); // 초기값을 0으로 설정
   

2. .current 프로퍼티:
   • useRef는 객체를 반환하며, 이 객체의 .current 프로퍼티에 값이 저장됩니다.

   console.log(myRef.current); // 초기값 또는 업데이트된 값
   

3. 렌더링 영향 없음:
   • useRef로 값을 변경해도 컴포넌트는 리렌더링되지 않습니다.
   • 이와 비교해, useState는 값이 바뀔 때마다 리렌더링을 유발합니다.

---

사용 예제 1: DOM 요소에 접근

React에서는 일반적으로 DOM 조작을 최소화하지만, 특정 상황에서는 필요합니다. 예를 들어, 입력 필드에 자동으로 포커스를 설정하려면 useRef를 사용할 수 있습니다.

import React, { useRef, useEffect } from "react";

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

  useEffect(() => {
    inputRef.current.focus(); // 입력 필드에 포커스 설정
  }, []);

  return <input ref={inputRef} placeholder="자동 포커스 필드" />;
}

export default AutoFocusInput;

실제 적용 사례:

• 로그인 페이지에서 사용자 편의성을 위해 자동 포커스를 설정
• 모달 창이 열릴 때 특정 버튼에 포커스 설정

---

사용 예제 2: 값 저장 및 상태 관리

useRef는 렌더링 간 유지해야 하는 값을 저장하는 데 적합합니다. 예를 들어, 타이머의 현재 시간을 추적할 때 사용할 수 있습니다.

import React, { useRef, useState } from "react";

function Timer() {
  const timerRef = useRef(null);
  const [seconds, setSeconds] = useState(0);

  const startTimer = () => {
    timerRef.current = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(timerRef.current); // 타이머 정지
  };

  return (
    <div>
      <h1>{seconds} 초</h1>
      <button onClick={startTimer}>시작</button>
      <button onClick={stopTimer}>정지</button>
    </div>
  );
}

export default Timer;

장점:

• useState와 다르게 useRef는 값 변경 시 리렌더링이 발생하지 않아 효율적입니다.

---

사용 예제 3: 이전 상태 값 추적

컴포넌트가 렌더링되기 전의 상태를 추적하고 싶다면 useRef를 활용할 수 있습니다.

import React, { useRef, useEffect, useState } from "react";

function PreviousStateTracker() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count; // 현재 상태를 저장
  });

  const prevCount = prevCountRef.current;

  return (
    <div>
      <h1>현재 값: {count}</h1>
      <h2>이전 값: {prevCount}</h2>
      <button onClick={() => setCount((c) => c + 1)}>증가</button>
    </div>
  );
}

export default PreviousStateTracker;

실제 활용:

• 데이터 업데이트 전후 비교
• 사용자 행동 추적

---

useRef vs. useState: 언제 사용할까?

특징 useRef useState

값 변경 시 리렌더링	❌ 발생하지 않음	✅ 발생함
렌더링 간 값 유지	✅ 가능	✅ 가능
DOM 조작	✅ 가능	❌ 불가능

요약:

• DOM에 직접 접근해야 할 때는 useRef를 사용하세요.
• 값 변경이 UI에 반영되어야 한다면 useState를 사용하세요.

---

실전 팁과 주의점

1. DOM 조작은 최소화하기:
   • React의 주요 장점은 가상 DOM을 통한 효율적인 UI 업데이트입니다. useRef로 DOM 조작이 필요할 때만 사용하세요.
2. useEffect와 함께 사용:
   • DOM 접근 시점이 렌더링 이후임을 보장하려면 useEffect와 함께 사용하는 것이 안전합니다.
3. 초기값 명시:
   • useRef를 사용할 때 명확한 초기값을 설정하면 예기치 않은 오류를 방지할 수 있습니다.

---

마치며

useRef는 React 개발에서 중요한 도구로, DOM 접근뿐만 아니라 렌더링과 관련 없는 데이터 저장에도 유용합니다. 위의 예제를 통해 useRef의 다양한 활용법을 익히고, 여러분의 프로젝트에서 활용해 보세요. React 개발의 생산성과 효율성이 한층 향상될 것입니다.

추가로 궁금한 점이나 더 알고 싶은 내용이 있다면 댓글로 알려주세요! 😊