[Dseok의 코딩스터디] React.js useRef 한방에 끝내기 | 개념 & 실전 예제 9가지

📌 useRef란?

React의 useRef는 DOM 요소나 값의 변화를 감지하지 않고 유지할 수 있는 참조(ref)를 생성하는 Hook입니다. 렌더링과 관계없이 데이터를 저장할 수 있으며, 컴포넌트가 리렌더링되어도 초기화되지 않는 값을 관리하는 데 유용합니다.

✅ 기본 문법

import { useRef } from "react";

function Component() {
  const myRef = useRef(initialValue);
  return <div ref={myRef}>Hello</div>;
}

• useRef(initialValue): 초기값을 설정할 수 있으며, current 속성을 통해 접근 가능
• ref={myRef}: DOM 요소에 ref 속성을 설정하여 직접 참조 가능

📌 useRef의 주요 활용 사례

1. DOM 요소 직접 조작
2. 값을 저장하지만 리렌더링을 유발하지 않음
3. 이전 상태(previous state) 저장
4. 포커스, 스크롤 제어
5. setTimeout, setInterval 등과 함께 사용
6. 외부 라이브러리 연동

📌 useRef 실전 예제 10가지

1️⃣ DOM 요소 직접 조작

import { useRef } from "react";

function FocusInput() {
  const inputRef = useRef(null);
  
  const handleClick = () => {
    inputRef.current.focus(); // input에 포커스
  };
  
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>포커스</button>
    </div>
  );
}

✅ 설명: 버튼 클릭 시 inputRef.current.focus()를 호출하여 입력창에 포커스를 자동으로 이동시킴.

 

2️⃣ 이전 상태 저장 (Previous State 유지)

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

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

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

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

✅ 설명: useEffect를 사용하여 prevCountRef.current에 이전 값을 저장함.

 

3️⃣ setTimeout과 함께 사용 (비동기 이벤트 유지)

import { useRef } from "react";

function TimerComponent() {
  const timerRef = useRef(null);
  
  const startTimer = () => {
    timerRef.current = setTimeout(() => {
      alert("타이머 완료!");
    }, 3000);
  };
  
  const clearTimer = () => {
    clearTimeout(timerRef.current);
  };
  
  return (
    <div>
      <button onClick={startTimer}>타이머 시작</button>
      <button onClick={clearTimer}>타이머 취소</button>
    </div>
  );
}

✅ 설명: useRef를 사용하여 타이머 ID를 저장하고, 필요할 때 clearTimeout을 호출하여 취소 가능.

 

4️⃣ 스크롤 위치 저장 및 복원

import { useRef } from "react";

function ScrollComponent() {
  const divRef = useRef(null);

  const scrollToBottom = () => {
    divRef.current.scrollTop = divRef.current.scrollHeight;
  };

  return (
    <div>
      <div ref={divRef} style={{ height: "200px", overflowY: "scroll", border: "1px solid black" }}>
        {Array.from({ length: 50 }, (_, i) => (
          <p key={i}>내용 {i + 1}</p>
        ))}
      </div>
      <button onClick={scrollToBottom}>아래로 이동</button>
    </div>
  );
}

✅ 설명: useRef를 사용하여 스크롤을 컨트롤할 수 있음.

 

5️⃣ 외부 라이브러리 연동 (예: Chart.js, Three.js)

import { useRef, useEffect } from "react";
import Chart from "chart.js/auto";

function ChartComponent() {
  const chartRef = useRef(null);
  
  useEffect(() => {
    const ctx = chartRef.current.getContext("2d");
    new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow"],
        datasets: [{
          label: "Votes",
          data: [12, 19, 3],
          backgroundColor: ["red", "blue", "yellow"]
        }]
      }
    });
  }, []);

  return <canvas ref={chartRef}></canvas>;
}

✅ 설명: useRef를 활용하여 canvas 요소를 참조하고, 외부 라이브러리와 함께 사용 가능.

 

6️⃣ 비디오 컨트롤 (재생/일시정지)

import { useRef } from "react";

function VideoPlayer() {
  const videoRef = useRef(null);

  const togglePlay = () => {
    if (videoRef.current.paused) {
      videoRef.current.play();
    } else {
      videoRef.current.pause();
    }
  };

  return (
    <div>
      <video ref={videoRef} width="400" controls>
        <source src="your-video.mp4" type="video/mp4" />
      </video>
      <button onClick={togglePlay}>재생 / 일시정지</button>
    </div>
  );
}

✅ 설명: useRef를 활용해 비디오 요소를 직접 컨트롤할 수 있음.

 

7️⃣ 클릭 횟수 저장 (렌더링 방지)

import { useState, useRef } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);
  const clickRef = useRef(0);

  const handleClick = () => {
    clickRef.current += 1;
    setCount(count + 1);
  };

  return (
    <div>
      <h1>렌더링 횟수: {clickRef.current}</h1>
      <h2>현재 카운트: {count}</h2>
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

✅ 설명: useRef를 사용하면 렌더링 없이 값 유지가 가능하여 불필요한 렌더링을 줄일 수 있음.

 

8️⃣ 입력 필드 자동 포커스 (폼 UX 개선)

import { useEffect, useRef } from "react";

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

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

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

✅ 설명: useEffect와 함께 사용하여 페이지 로딩 시 자동으로 입력 필드에 포커스를 맞출 수 있음.

 

9️⃣ 드래그 앤 드롭 (Drag & Drop) 구현

import { useRef } from "react";

function DraggableBox() {
  const boxRef = useRef(null);

  const handleDragStart = (e) => {
    e.dataTransfer.setData("text/plain", "dragging");
  };

  return (
    <div
      ref={boxRef}
      draggable
      onDragStart={handleDragStart}
      style={{ width: "100px", height: "100px", backgroundColor: "blue", cursor: "grab" }}
    ></div>
  );
}

✅ 설명: useRef를 사용하여 HTML 요소의 드래그 기능을 추가할 수 있음.

📌 마무리 🎯

🔑 useRef 핵심 정리

• 렌더링 없이 값 유지 가능 (DOM 요소, 상태 값 저장)
• DOM 직접 조작 가능 (focus(), scrollTo(), play(), pause() 등)
• 이전 상태 저장 가능 (useEffect와 함께 사용)
• 외부 라이브러리 연동 가능 (Chart.js, Three.js 등)
• 비동기 타이머 제어 가능 (setTimeout, setInterval)

🚀 이제 useRef를 활용하여 다양한 기능을 구현해 보세요! 😊