useRef란?

React에서 제공하는 훅 중 하나로 주로 두 가지 목적으로 사용된다.

DOM 요소 직접 접근 useRef를 사용하여 DOM 요소를 참조할 수 있다. 애니메이션 효과, 외부 라이브러리 사용 등 직접 DOM에 접근할 때 사용한다.

값 저장하기 useRef는 React의 UI 리랜더링에 영향을 받지 않는 공간이다. useState를 사용하여 저장한 값은 변화가 발생하면 리랜더링이 발생하지만 useRef로 저장한 값은 변경이 되어도 리랜더링이 발생하지 않고 값은 계속 유지된다.

DOM 요소 직접 접근하기

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

function TextInputWithFocus() {
  // useRef를 사용해 inputEl이라는 ref 객체를 생성합니다.
  const inputEl = useRef(null);

  // 컴포넌트가 마운트될 때, inputEl에 저장된 DOM 요소에 포커스를 줍니다.
  useEffect(() => {
    // current 프로퍼티를 통해 저장된 DOM 요소에 접근하여 focus 메서드를 호출합니다.
    inputEl.current.focus();
  }, []);

  return (
    <div>
      {/* ref 속성을 통해 inputEl ref를 input 요소에 연결합니다. */}
      <input ref={inputEl} type="text" />
      <button onClick={() => inputEl.current.focus()}>
        Focus the input
      </button>
    </div>
  );
}

export default TextInputWithFocus;

예제는 input 요소에 ref 속성을 부여하고 useRef훅을 사용해서 input 요소를 직접 접근한다.

inputEl.current 경로를 통해 접근할 수 있다.

다른 예시로는 스크롤 최상단으로 이동하는 기능에서 최상단에 요소를 숨겨놓고 useRef로 참조하여 추적하는 방식으로 구현할 수 있다.

UI 리랜더링이 발생하지 않는다.

바스크립트 방식으로 변수를 선언하면 state의 변화가 발생할 경우 초기화되버린다.

리랜더링으로부터 자유롭게 유지해야할 변수가 필요하고 그러나 리랜더링은 발생시키지 않아야할 때 쓴다.

데이터 저장하기

• useRef는 변수에 값을 “저장”하는 것처럼 값을 저장할 수 있다.
• 값이 변화해도 리랜더링을 발생시키지 않는다.

이전 상태 값 저장하여 비교하기

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

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

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

  return (
    <div>
      <h1>Now: {count}, before: {prevCountRef.current}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

버튼 클릭으로 카운트가 +1 되는 동작이 발생한다.

state가 변경되면 리랜더링이 발생하며 count의 최신 값이 화면에 랜더링된다.

이 때, useEffect로 랜더링 이후 useRef가 실행되는데 useRef는 리랜더링을 발생시키지 않기 때문에 화면에 보이는 값은 useRef의 업데이트 이전 값이 나타난다.

실제로 버튼을 누르면 count와 prevCountRef.current는 같은 값이지만

랜더링 시점이 달라서 prevCountRef.current의 값은 이전 값이 화면에 보여지게 되는 것이다.

• useRef는 데이터는 저장하지만 리랜더링을 발생시키지 않는다는 특징을 확인할 수 있다.