C2C Dev

useRef

React에서 DOM 요소나 효과를 저장하고 추천할 수 있는 Hook

사용하면, 구성 요소가 다시 연결되는 기본값이 캠핑이 되지 않고, DOM 요소 상태를 변경하지 않고 다른 값에 접근할 수 있다.

useRef의 주요 특징

• 리더링되지 않는다 : useRef에 저장된 값이 포함된 구성요소는 리렌더링되지 않는다.
• 침입자가 포함 되지 않은 경우 : 구성 요소가 리렌더링으로 인해 useRef저장되지 않은 값은 유지
• DOM 접근 : useRef는 DOM 요소에 직접 접근할 때 유용합니다. document.getElementById()대신 querySelector()에 사용할 수 있다.

문법

import React, {useRef} from 'react';

const refContainer = useRef(initialValue);

// ref(객체명) = useRef(초기값);
//ref(객체명).current: ref에 저장된 값을 참조합니다.

예시 

1. DOM 요소에 접근하기

import React, { useRef } from 'react';

const InputFocus = () => {
  const inputRef = useRef<HTMLInputElement>(null);

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

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

export default InputFocus;

요소 useRef를 사용하여 input접근하고, 버튼을 클릭하면 입력 요소에 포커스를 설정

2. 기본 유지(리렌더링 시 기본으로 인해 발생하지 않음)

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

const Counter = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const incrementCount = () => {
    setCount(count + 1); // 상태 업데이트
    countRef.current += 1; // ref 값 업데이트 (리렌더링과 무관)
  };

  return (
    <div>
      <p>State Count: {count}</p>
      <p>Ref Count: {countRef.current}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default Counter;

countRef가 리렌더링을 하지 않으며, 변경되지 않은 채로 가치가 있는 상태로 보관

useRef는 다음과 같은 DOM 요소를 참조하거나 리렌더링 사이에서도 상태를 유지하고 원하는 경우에 유용