useRef

 

🎯 useRef란 무엇인가요?

**useRef**는 컴포넌트 안에서 값이나 DOM 요소를 저장하고 관리할 때 사용해요.
여기서 중요한 포인트는:

• 값이 바뀌어도 화면이 다시 렌더링되지 않아요.
• DOM 요소(HTML 요소)에 직접 접근할 때도 사용할 수 있어요.

 

📦 상자를 기억하는 이야기

여러분이 물건을 담아두는 상자를 하나 가지고 있다고 상상해 보세요. 📦

• 이 상자에 값을 넣어두면, 언제든지 꺼내서 사용할 수 있어요.
• 하지만 상자에 물건을 넣고 빼도 상자는 변하지 않아요(렌더링이 다시 일어나지 않아요).

React에서 **useRef**는 이런 상자와 같은 역할을 해요!
값을 저장해두지만 화면에 영향을 주지 않고, 필요할 때 꺼내 쓸 수 있죠.

 

🛠️ useRef를 사용하는 예시

1. DOM 요소에 접근하기

useRef를 사용하면 HTML 요소에 직접 접근할 수 있어요. 예를 들어 입력창에 포커스를 주는 기능을 만들어볼까요?

import React, { useRef } from "react";

function FocusInput() {
  const inputRef = useRef(null); // useRef로 참조 생성

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

  return (
    <div>
      <h3>useRef로 입력창에 포커스 주기</h3>
      <input ref={inputRef} type="text" placeholder="여기에 입력하세요" />
      <button onClick={handleFocus}>포커스 주기</button>
    </div>
  );
}

export default FocusInput;

🔍 코드 설명

1. useRef로 참조 생성
   • const inputRef = useRef(null)를 사용해 input 요소를 참조할 준비를 해요.
2. ref 속성 연결
   • <input ref={inputRef} />를 사용해 input 요소와 useRef를 연결해 줍니다.
3. 요소에 접근
   • inputRef.current를 사용하면 실제 input DOM 요소에 접근할 수 있어요.
   • focus() 메서드를 호출해서 입력창에 포커스를 주는 기능을 만들었어요.

📝 결과

1. 입력창에 값을 쓰지 않고 버튼만 눌러보세요.
2. 버튼을 클릭하면 입력창에 포커스가 이동합니다! 🎯

 

2. 값 저장하기 (렌더링 없이 값 관리)

useRef는 화면을 다시 렌더링하지 않고도 값을 저장할 수 있어요.
이를 활용하면 변수를 관리하거나 타이머 같은 것을 만들 때 유용해요.

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

function Timer() {
  const [count, setCount] = useState(0);
  const timerRef = useRef(null); // 타이머 ID를 저장

  const startTimer = () => {
    if (!timerRef.current) {
      timerRef.current = setInterval(() => {
        setCount((prev) => prev + 1);
      }, 1000); // 1초마다 count 증가
    }
  };

  const stopTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = null; // 타이머 초기화
  };

  return (
    <div>
      <h3>useRef로 타이머 만들기</h3>
      <p>카운트: {count}</p>
      <button onClick={startTimer}>타이머 시작</button>
      <button onClick={stopTimer}>타이머 정지</button>
    </div>
  );
}

export default Timer;

🔍 코드 설명

1. useRef로 타이머 ID 저장
   • timerRef는 화면과는 상관없이 타이머 ID를 저장하는 역할을 해요.
2. 화면 렌더링 없이 값 유지
   • 타이머가 실행되도 timerRef 값만 변경될 뿐, 화면이 다시 렌더링되지 않아요.
3. 정지 버튼
   • 타이머를 정지하면 clearInterval을 사용해 타이머를 멈추고 timerRef를 초기화합니다.

 

🚀 useRef의 핵심 포인트!

1. DOM 요소에 접근
   • input, button, div 같은 HTML 요소에 접근할 때 사용해요.
2. 화면 렌더링 없이 값 관리
   • 값이 바뀌어도 컴포넌트가 다시 렌더링되지 않아요.
3. 타이머나 변수 저장
   • 타이머 ID, 이전 상태값 등을 저장하고 관리할 때 유용해요.

 

🌟 정리하자면!

useRef는 DOM 요소에 접근하거나 화면 렌더링과 상관없이 값을 저장하고 관리할 수 있는 React 훅이에요.
화면이 다시 그려지지 않아야 하는 상황에서 아주 유용하게 사용됩니다!