[3분 리액트] React18의 useTransition, useDeferredValue 훅에 대해 알아보자

원문 : https://academind.com/tutorials/react-usetransition-vs-usedeferredvalue

React: useTransition() vs useDeferredValue()

useTransition() in Action

useTransition()을 사용하여 특정 상태 업데이트의 우선순위가 더 낮다는 것을 React에 알릴 수 있습니다

(즉, 다른 모든 상태 업데이트 또는 UI 렌더링 트리거가 더 높은 우선순위를 가짐).

useTransition()을 호출하면 정확히 두 개의 요소가 있는 배열을 반환합니다.

우선 순위가 낮은 상태 업데이트가 아직 보류 중인지 여부를 알려주는 isPending 부울 값과

상태 업데이트를 둘러싸서 알릴 수 있는 startTransition() 함수입니다.

리액트는 해당 함수 내부 코드를 우선 순위가 낮은 업데이트라고 판단 후 처리합니다.

 

function App() {
  const [isPending, startTransition] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');

  const filteredProducts = filterProducts(filterTerm);

  function updateFilterHandler(event) {
    startTransition(() => {
      setFilterTerm(event.target.value);
    });
  }

  return (
    <div id="app">
      <input type="text" onChange={updateFilterHandler} />
      {isPending && <p>Updating List...</p>}
      <ProductList products={filteredProducts} />
    </div>
  );
}

---

비디오 보기 : https://www.youtube.com/watch?v=lDukIAymutM 

동영상 예시

setFilterTerm() 상태 업데이트 함수는 startTransition()에 의해 래핑되므로

React는 이 상태 업데이트 코드를 더 낮은 우선순위로 처리합니다.

데모에서 이는 입력 필드가 반응을 유지하고 키 입력에 즉시 반응함을 의미합니다.

useTransition()을 사용하지 않으면 특히 느린 장치에서 앱이 응답하지 않을 수 있습니다. (동기적으로 죄다 렌더링한 후에 반응하기 때문)

즉, input 내부는 빠르게 변경되지만, 인풋 값을 사용하여 렌더링하는 요소들의 렌더링은 후에 처리될 수 있어 사용자 입력에 빠르게 대응합니다.

---

useDeferredValue() in Action

useTransition()은 어떤 코드를 래핑하고 "낮은 우선순위"로 처리할지 결정하기 때문에 완전한 제어를 제공합니다.

그러나 때로는 실제 상태 업데이트 코드에 액세스하지 못할 수도 있습니다(예: 일부 타사 라이브러리에서 수행하기 때문에).

또는 어떤 이유로 useTransition()을 사용할 수 없습니다.

이러한 경우 대신 useDeferredValue()를 사용할 수 있습니다.

useDeferredValue()를 사용하면 상태 업데이트 코드를 래핑하지 않고

대신 상태 업데이트로 인해 생성되거나 변경된 값(상태 값 자체 또는 비디오에 표시된 데모 앱)을 래핑합니다.

예시는 아래와 같습니다.

function ProductList({ products }) {
  const deferredProducts = useDeferredValue(products);
  return (
    <ul>
      {deferredProducts.map((product) => (
        <li>{product}</li>
      ))}
    </ul>
  );
}

---

여기서 useDeferredValue()는 prop을 포장하는 데 사용됩니다.

결과적으로 React는 prop 값과 관련된 업데이트보다 우선 순위가 높은 다른 상태 또는 UI 업데이트를 수행합니다.

---

언제 어떤걸 사용하나요?

위에서 언급했듯이 차이점은 useTransition()이 상태 업데이트 코드를 래핑하는 반면

useDeferredValue()는 상태 업데이트의 영향을 받는 값을 래핑한다는 것입니다.

결국 같은 목표를 달성하기 때문에 둘 다 함께 사용할 필요가 없습니다.

 

대신 더 낮은 우선 순위로 처리해야 하는 상태 업데이트가 있고

상태 업데이트 코드에 액세스할 수 있는 경우

useTransition()을 선호하는 것이 좋습니다.

해당 코드에 액세스 권한이 없으면 useDeferredValue()를 사용하십시오.

---

남용하지 마세요!

매우 중요: 모든 상태 업데이트를 useTransition()으로 래핑하거나 모든 값을 useDeferredValue()로 래핑하지 않아야 합니다.

다른 수단으로 최적화할 수 없는 복잡한 사용자 인터페이스 또는 구성 요소가 있는 경우 이러한 훅을 사용해야 합니다.

지연 로딩, 페이지네이션 또는 worker 스레드 또는 백엔드에서 작업 수행과 같은 기타 성능 향상을 항상 염두에 두어야 합니다.