[React] Hooks - useRef

useRef란 무엇인가?

React의 useRef Hook은 참조(ref)를 통해 DOM 요소나 컴포넌트 상태 값을 유지하는 데 중요한 역할을 한다. useRef는 주로 DOM 요소에 직접 접근, 불필요한 재렌더링 방지, 상태 값 유지 등의 상황에서 유용하게 사용된다.

useRef는 변경 가능한 객체를 반환한다. 이 객체의 .current 프로퍼티에 값을 저장할 수 있으며 이는 컴포넌트가 다시 렌더링되더라도 값이 유지된다. 일반적으로 DOM 요소에 접근하거나 렌더링 사이에서 값을 기억하는 데 사용된다.

• ref 객체: useRef는 { current: null } 형태의 객체를 반환하며 이 객체는 렌더링 사이에서 값이 유지된다.
• DOM 접근: ref는 DOM 요소에 직접 접근할 때 주로 사용된다. ref를 통해 접근한 DOM 요소는 React가 관리하지 않는 외부에서 직접 조작이 가능하다.
• 재렌더링 없음: useRef로 저장된 값이 바뀌더라도 컴포넌트가 재렌더링되지 않는다.

useRef DOM 조작

import React, { useRef } from 'react';

function MyComponent() {
  // useRef를 사용하여 input 요소를 참조할 수 있도록 설정
  const inputRef = useRef(null);

  // 버튼 클릭 시 호출되는 함수, input 요소에 포커스를 맞춤
  function handleClick() {
    if (inputRef.current) {
      inputRef.current.focus(); // inputRef를 통해 현재 input 요소에 포커스 설정
    }
  }

  return (
    <div>
      {/* ref 속성에 inputRef를 전달하여 DOM 요소에 직접 접근 가능 */}
      <input ref={inputRef} type="text" placeholder="Click the button to focus" />
      
      {/* 버튼 클릭 시 handleClick 함수 실행 */}
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

export default MyComponent;

 

 

useRef의 상태 값 유지

useRef는 상태 값을 유지하는 용도로도 사용돤다. 특히 컴포넌트가 재렌더링되더라도 값이 유지되어야 하지만 재렌더링 자체를 트리거하지 않으려는 경우에 유용하다. useState는 값이 변경되면 컴포넌트를 재렌더링하지만 useRef는 그렇지 않다.

 

아래 예시에서 useRef는 setInterval의 ID를 저장하는 데 사용됩니다. 이 ID는 컴포넌트가 재렌더링되더라도 유지되지만 값이 변경될 때마다 컴포넌트를 다시 렌더링하지 않는다.

useRef vs useState
useState: 상태 값이 변경되면 컴포넌트가 재렌더링됨.
useRef: 값이 변경되어도 컴포넌트가 재렌더링되지 않음. 주로 DOM 접근과 렌더링 간 값 유지 용도로 사용.

function Stopwatch() {
  const intervalRef = useRef(null); // 타이머 ID를 저장할 ref
  const [seconds, setSeconds] = useState(0);

  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalRef.current); // 타이머 정지
  };

  return (
    <div>
      <p>{seconds} 초</p>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

 

참고 문헌

useRef – React