230825 개발일지 TIL - React Hooks : useRef

useRef란?

useRef는 React의 Hook 중 하나로, 렌더링 사이에서 값이 유지되는 변경 가능한 객체를 반환하는 데 사용된다. 이 Hook은 .current 프로퍼티에 변화를 넣어두고 해당 값을 가져올 수 있다.

useRef의 사용

1. DOM 요소에 접근하기
useRef를 사용하면 직접적인 DOM 요소에 접근할 수 있다. 예를 들어, 특정 입력 필드에 포커스를 주거나 그 값을 가져오기 위해 useRef가 종종 사용된다.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

button 클릭시 inputEl.current.focus(); 코드가 실행되어 입력 필드에 포커스가 가게 된다.

2. 컴포넌트의 생명주기 동안 값 유지하기

컴포넌트에서 인스턴스 변수들을 생성하여 생명주기 동안 값들을 유지하는 것처럼, 함수형 컴포넌트에서도 useRef를 이용하여 같은 작업을 할 수 있다.

import React, { useRef } from 'react';

function Timer() {
  const intervalId = useRef();

  useEffect(() => {
    intervalId.current = setInterval(() => {
      console.log('Timer running');
    }, 1000);

    return () => {
      clearInterval(intervalId.current);
    };
    
  }, []);
  
  
   return (
   	/* JSX */
   );
}

intervalId.current는 타이머 ID 값을 저장하고 있는데, 이 값은 타이머가 시작될 때 실행되고 타이머가 종료되면 해제된다.

주의할 점

useState와 달리 useRef()로 생성된 객체의 .current 속성을 변경해도 리렌더링이 일어나지 않는다.값이 변화하더라도 그 변화를 감지하여 컴포넌트를 리렌더링할 필요가 없는 경우에 유용하게 사용될 수 있다.