useRef가 필요한 상황?

useRef는 React에서 참조(reference)를 생성하고 관리하는 데 사용되는 Hook이다.

주로 두 가지 목적으로 사용되는데

DOM 요소에 직접 접근하는 목적과 변경 가능한 값을 컴포넌트 생명주기 동안 저장하는 목적이 있다.

 

DOM 요소에 직접 접근하는 목적 : useRef는 React에서 생성한 DOM 노드나 React 요소에 접근할 때 사용된다. React에서는 데이터 흐름을 위해 주로 "props"를 사용하지만, 가끔 직접적으로 DOM 요소에 접근해야 할 때가 있다. 예를 들어, 텍스트 입력을 위한 포커스 설정, 특정 사용자 액션에 대한 응답으로 애니메이션 실행, 외부 라이브러리에 DOM 요소를 전달할 때 등이다.

아래는 간단한 예시이다.

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

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // current 속성으로 input 요소에 접근하고 focus 메서드를 호출
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Set Focus</button>
    </>
  );
}

export default TextInputWithFocusButton;

위 예시에서 useRef Hook은 input 요소를 참조하는 데 사용된다. 이렇게 하면 컴포넌트가 마운트되면 input 요소가 자동으로 포커스를 얻는다.

 

변경 가능한 값을 컴포넌트 생명주기 동안 저장하는 목적 : useRef는 .current 프로퍼티를 가지는 변경 가능한(ref mutable) 객체를 반환하는데, 이 프로퍼티는 컴포넌트의 전체 수명 동안 유지된다. 이는 일반적으로 JavaScript에서 사용되는 변수와 비슷하지만, useRef로 생성된 변수는 해당 컴포넌트가 리렌더링되어도 그 값이 유지된다.

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

function Timer() {
  const countRef = useRef(0);

  useEffect(() => {
    setInterval(() => {
      countRef.current += 1;
      console.log(`Timer: ${countRef.current}`);
    }, 1000);
  }, []);

  return <h1>Check the console log.</h1>;
}

위 예시에서 useRef는 타이머 카운터 값을 추적하고 있다. 이 값은 컴포넌트의 수명 동안 유지되지만, 변경될 때 컴포넌트가 리렌더링되지 않는다.

이렇게 useRef는 참조 객체를 생성하고 반환하며, 이 객체는 .current 프로퍼티를 가지고 있다. .current 프로퍼티의 값은 변경 가능하며, 변경될 때 React는 컴포넌트를 리렌더링하지 않는다. 따라서 이 값을 변경해도 성능상의 부담이 없으며, 이는 리렌더링 없이 값이나 상태를 "기억"해야 하는 경우에 유용하다.