React useRef

React의 useRef Hook은 함수형 컴포넌트에서 DOM 요소에 접근하거나, 이전 상태를 저장하거나, 부수 효과를 실행하는 등의 작업을 수행하는 데 사용됩니다.

useState과의 차이

useRef와 useState 모두 React Hooks로, 함수형 컴포넌트에서 상태를 관리하거나 DOM 요소에 접근하는 등의 작업을 수행하는 데 사용됩니다. 하지만 두 Hooks는 다른 용도로 사용됩니다.

useState는 컴포넌트의 상태를 관리하기 위해 사용됩니다. useState는 상태 값과 이 값을 변경하는 함수를 반환합니다. 상태 값이 변경될 때마다 컴포넌트는 다시 렌더링됩니다.

반면, useRef는 컴포넌트에서 DOM 요소에 접근하거나, 이전 상태를 저장하거나, 부수 효과를 실행하는 등의 작업을 수행하는 데 사용됩니다. useRef는 변경 가능한 값을 유지하면서 렌더링 간에 값을 보존합니다. useRef를 사용하여 생성된 객체는 항상 같은 객체를 반환하므로 변경 사항이 있더라도 리렌더링이 발생하지 않습니다.

즉, useState는 컴포넌트의 상태 값을 변경하고, 변경사항을 렌더링에 반영합니다. useRef는 컴포넌트에서 DOM 요소에 접근하거나, 이전 상태를 저장하거나, 부수 효과를 실행하는 등의 작업을 수행할 때 사용되며, 렌더링에 영향을 주지 않습니다.

예시코드

import React, { useRef } from 'react';

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

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

위의 예제에서 useRef를 사용하여 inputRef 변수를 선언합니다. inputRef.current는 DOM 노드를 나타냅니다.

handleClick 함수에서는 inputRef.current.focus()를 사용하여 입력란에 포커스를 줍니다.

useRef를 사용하면 DOM 노드 외에도 이전 상태를 저장할 수도 있습니다. 다음은 useRef를 사용하여 이전 상태를 저장하는 예제입니다.

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

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

  function handleClick() {
    prevCountRef.current = count;
    setCount(count + 1);
  }

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCount !== undefined ? prevCount : 'N/A'}</p>
      <button onClick={handleClick}>Increment count</button>
    </div>
  );
}

위의 예제에서 useRef를 사용하여 prevCountRef 변수를 선언합니다. handleClick 함수에서는 prevCountRef.current에 이전 count 값을 저장합니다. 그리고 setCount를 호출하여 count 값을 업데이트합니다.

마지막으로 prevCount 변수를 사용하여 이전 count 값을 렌더링합니다. 만약 이전 count 값이 없으면 'N/A'를 렌더링합니다.