[React] useRef

useRef 란

useRef는 React에서 제공하는 Hook 함수 중 하나로, 일반적으로 DOM 요소를 선택하거나 컴포넌트에서 변경 가능한 값을 저장하는 데 사용된다.

 

예시

예를 들어, useRef를 사용하여 DOM 요소를 선택하는 경우 다음과 같이 코드를 작성할 수 있다.

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

function Example() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input type="text" ref={inputRef} />;
}

위의 코드에서 useRef를 사용하여 input 요소를 선택하고, useEffect를 사용하여 컴포넌트가 마운트될 때 input 요소에 자동으로 포커스가 되도록 설정한다.

 

또한, useRef를 사용하여 컴포넌트에서 변경 가능한 값을 저장할 수도 있다.

이전 렌더링 값과 다음 렌더링 값을 비교하려는 경우에 사용할 수 있다.

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

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

  // 이전 렌더링 값과 다음 렌더링 값을 비교합니다.
  if (prevCountRef.current !== count) {
    console.log('Count changed:', count);
    prevCountRef.current = count;
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

위의 코드에서 useRef를 사용하여 이전 렌더링 값(prevCountRef.current)을 저장하고,

useState를 사용하여 상태 값(count)을 관리한다.

 

count 값이 변경될 때마다 prevCountRef.current 값과 비교하여 변경되었는지 확인하고, 변경된 경우 로그를 출력한다.