React의 useRef 대 useState

React와 관련하여 애플리케이션에서 상태를 관리할 수 있는 두 가지 방법이 있습니다: useState 후크 또는 useRef 후크. 둘 다 고유한 장점과 단점이 있으며 잘 구성되고 유지 관리 가능한 React 코드를 작성하려면 각각을 언제 사용해야 하는지 아는 것이 중요합니다.
useState 후크는 초기 상태인 단일 인수를 사용하는 함수입니다. 현재 상태와 상태를 업데이트하는 함수라는 한 쌍의 값을 반환합니다. 상태를 업데이트하는 함수는 새 값을 받아 업데이트된 상태를 반환합니다.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

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

useRef 후크는 초기값인 단일 인수를 취하는 함수입니다. .current 속성이 있는 가변 객체를 반환합니다. .current 속성은 초기 값으로 초기화되며 .current.set() 메서드로 업데이트할 수 있습니다.

import React, { useRef } from 'react';

function App() {
  const countRef = useRef(0);

  return (
    <div>
      <p>{countRef.current}</p>
      <button onClick={() => countRef.current.set(countRef.current + 1)}>
        Increment
      </button>
    </div>
  );
}

useState와 useRef 후크 사이에는 이해해야 할 몇 가지 중요한 차이점이 있습니다.

첫 번째 차이점은 useState 후크가 변경되지 않은 경우에도 항상 현재 상태를 반환한다는 것입니다. 이는 setState 함수가 새 상태 개체를 생성하고 React가 참조 동등성을 사용하여 구성 요소를 다시 렌더링해야 하는지 결정하기 때문입니다.

반면에 useRef 후크는 반환하는 가변 객체의 속성.current만 업데이트합니다. 즉, .current 속성이 변경되지 않은 경우 React는 구성 요소를 다시 렌더링하지 않습니다.

두 번째 차이점은 useState 후크는 함수이고 useRef 후크는 객체라는 것입니다. 이는 상태를 업데이트하기 위해 useState 함수에 인수를 전달할 수 없음을 의미합니다. 대신 useState 에서 반환되는 함수를 호출해야 합니다.

세 번째 차이점은 useState 후크는 기능 구성 요소와 함께 사용하도록 설계된 반면 useRef 후크는 기능 또는 클래스 기반 구성 요소와 함께 사용할 수 있다는 것입니다.

네 번째 차이점은 useState 후크는 구성 요소가 렌더링될 때 초기화되는 반면 useRef 후크는 구성 요소가 생성될 때 초기화된다는 것입니다. 즉, 렌더링 함수 외부에서 상태에 액세스해야 하는 경우 useRef 후크를 사용해야 합니다.

그렇다면 어느 것을 사용해야 할까요? 그것은 당신의 필요에 달려 있습니다. 렌더링 함수 외부에서 상태에 액세스해야 하거나 클래스 기반 구성 요소를 사용 중인 경우 useRef 후크를 사용하십시오. 그렇지 않으면 useState 후크를 사용하십시오.