[React] useRef란?

React의 useRef 훅은 다양한 용도로 사용되며, 이를 통해 React 컴포넌트 내에서 변경 가능한 값을 관리할 수 있습니다. 이 게시물에서는 useRef의 기본적인 사용법부터 시작하여, 고급 사용 사례까지 다루어 보겠습니다. 또한, useRef를 사용할 때의 주의점과 팁도 공유하겠습니다.

useRef의 기본 사용법

useRef는 React의 내장 훅 중 하나로, 주로 DOM 요소에 직접적으로 접근할 필요가 있을 때 사용합니다. 하지만 이외에도 컴포넌트의 생명주기 동안 유지되어야 하는 변경 가능한 값을 저장하는 용도로도 쓰입니다.

기본적인 사용 예시:

import React, { useRef } from 'react';

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

  const onButtonClick = () => {
    // 현재의 input 요소에 직접적으로 접근하여 포커스를 줍니다.
    inputEl.current.focus();
  };

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

고급 사용 사례

useRef는 DOM 요소에 접근하는 것 외에도, 컴포넌트의 렌더링 사이에 지속되어야 하는 값을 보관하는 데 사용할 수 있습니다. 이 값은 컴포넌트가 리렌더링되어도 초기화되지 않으며, 변경될 때 리렌더링을 유발하지도 않습니다.

타이머 ID 저장하기:

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

function TimerComponent() {
  const intervalRef = useRef();

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      console.log('타이머 작동중...');
    }, 1000);
    return () => clearInterval(intervalRef.current);
  }, []);

  return <div>타이머 시작!</div>;
}

주의점 및 팁

• useRef로 생성된 객체는 .current 프로퍼티를 통해 접근할 수 있으며, 이 프로퍼티는 변경 가능합니다.
• useRef는 컴포넌트가 리렌더링될 때마다 동일한 ref 객체를 제공합니다. 이 특성 덕분에, 값이나 DOM 요소에 안정적으로 접근할 수 있습니다.
• 리렌더링을 유발하지 않는다는 점에서 useState와 차이가 있습니다. 만약 상태 변경에 따른 컴포넌트의 리렌더링이 필요하다면, useState나 useReducer를 사용하는 것이 더 적합합니다.

useRef는 React에서 제공하는 훅 중 매우 유용하며, 다양한 시나리오에서 활용될 수 있습니다. DOM 요소에 직접적으로 접근해야 할 때나, 리렌더링에 영향을 주지 않으면서 값이 유지되어야 할 때 사용해보세요.