`React` UseRef

useRef

 

React에서 제공하는 훅으로 함수 컴포넌트에서 DOM 요소에 접근하거나

리렌더링과 상관없이 값을 유지할 수 있는 변수를 관리할 때 유용

 

 

주요 기능

 

DOM 요소에 접근하기

 

import { useRef } from 'react';

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

  const focusInput = () => {
    inputRef.current.focus();
  };

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

 

위 코드에서는 input 요소에 ref를 연결해 버튼 클릭 시 해당 입력 필드에 포커스를 줄 수 있음

 

 

 

 

값 저장 및 유지

 

useRef는 컴포넌트가 리렌더링되더라도 변경되지 않는 값을 저장할 수 있고

이 값은 current라는 프로퍼티에 저장됨.

 

useRef로 저장된 값은 state와 달리 값이 변경돼도 컴포넌트를 리렌더링하지 않음.

function Counter() {
  const count = useRef(0);

  const increment = () => {
    count.current += 1;
    console.log(count.current);
  };

  return <button onClick={increment}>Increment</button>;
}

 

위 코드에서 count.current는 컴포넌트가 리렌더링되더라도 값이 유지되며, 리렌더링을 발생시키지 않음.

 

결론

• useRef는 DOM 요소 접근 및 비상태 데이터 저장에 유용함.
• 리렌더링과 관계없이 값을 유지할 수 있어, 성능 최적화 및 특정 참조가 필요할 때 사용됨.
• 주로 상태 변화와 관계없는 데이터를 관리하거나 DOM 조작에 사용됨.