디바운스(Debounce)와 스로틀(Throttle) 을 대체할 수 있는 react hook인 useDeferredValue와 useTransition를 알아보겠습니다.

React 18의 Concurrent Rendering: useDeferredValue와 useTransition

최신 React 버전인 React 18은 놀라운 성능 개선과 유연성을 제공하는 concurrent rendering 기능을 도입했습니다. 이를 통해 UI 업데이트와 상호작용을 더욱 부드럽게 처리할 수 있게 되었습니다. 이번 글에서는 React 18에서 도입된 중요한 변화 중 하나인 useDeferredValue와 useTransition 훅에 대해 알아보겠습니다.

---

Concurrent Rendering이란?

Concurrent Rendering은 React 18에서 새롭게 도입된 기능으로, 병렬 처리와 우선순위 조절을 통해 더 나은 사용자 경험을 제공합니다. 이전 버전에서는 UI 업데이트나 상태 변화가 발생하면 그 작업이 완료될 때까지 메인 스레드가 블록되는 문제가 있었습니다. 하지만 Concurrent Rendering은 작업의 우선순위를 조절하여 중요한 작업에 먼저 반응할 수 있도록 합니다.

---

useDeferredValue 훅

useDeferredValue 훅은 React 18에서 새롭게 도입된 훅 중 하나로, 값의 업데이트 우선순위를 조절하는 데 사용됩니다. 이전 값을 기억하면서도 업데이트를 지연시키므로, 메인 스레드가 블로킹되지 않으면서도 높은 우선순위의 작업을 처리할 수 있습니다.

예를 들어, 검색 자동완성 기능을 가진 애플리케이션에서 useDeferredValue를 활용하면 유저의 검색 쿼리가 변경되더라도 추천 검색어 업데이트가 늦어지지 않습니다. 이전 값을 유지하면서도 추천 검색어 업데이트를 지연시켜 유저 경험을 향상시킬 수 있습니다.

예제 1: 검색 자동완성

import { useState } from 'react';
import { useDeferredValue } from 'react';

function SearchBar() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e)=> setQuery(e.target.value)}
      />
      <SearchSuggestions query={deferredQuery} />
    </div>
  );
}

예제 2: 실시간 데이터 업데이트

import { useState } from 'react';
import { useDeferredValue } from 'react';

function RealtimeDataDisplay() {
  const [data, setData] = useState('');
  const deferredData = useDeferredValue(data);

  // 데이터를 주기적으로 업데이트하는 함수
  const fetchData = async () => {
    const response = await fetch('api/data');
    const newData = await response.json();
    setData(newData);
  };

  return (
    <div>
      <button onClick={fetchData}>새로운 데이터 가져오기</button>
      <DataDisplay data={deferredData} />
    </div>
  );
}

---

useTransition 훅

useTransition 훅은 상태 변화의 우선순위를 지정하는 데 사용됩니다. isPending와 startTransition을 반환하며, isPending는 작업이 지연되고 있는지 여부를 나타내는 불리언 값이고, startTransition은 낮은 우선순위로 실행될 함수를 받습니다.

예를 들어, 버튼 클릭 시 상태 업데이트를 지연시키고, 그 동안 로딩 스피너를 표시하고자 할 때 다음과 같이 활용할 수 있습니다.

예제 1: 버튼 클릭 처리

import { useState } from 'react';
import { useTransition } from 'react';

function ButtonWithTransition() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    startTransition(() => {
      setCount((prevCount) => prevCount + 1);
    });
  };

  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={handleClick}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

예제 2: 로딩 상태와 데이터 표시

import { useState } from 'react';
import { useTransition } from 'react';

function LoadingAndDataDisplay() {
  const [data, setData] = useState(null);
  const [isPending, startTransition] = useTransition();

  const fetchData = async () => {
    startTransition(() => {
      setData(null); // Reset previous data
    });

    const response = await fetch('api/data');
    const newData = await response.json();

    startTransition(() => {
      setData(newData);
    });
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {isPending ? (
        <p>Loading...</p>
      ) : (
        <DataDisplay data={data} />
      )}
    </div>
  );
}

---

디바운스와 스로틀링의 단점

디바운스와 스로틀링은 자주 발생하는 이벤트나 상태 업데이트를 제어하여 성능을 최적화하는데 사용되지만, 여전히 몇 가지 문제점을 가지고 있습니다.

디바운스의 단점

• 지연 시간 선택의 어려움: 디바운스에 사용할 지연 시간을 결정하기 어려울 수 있습니다. 지연 시간이 너무 짧으면 의도치 않게 빈번한 처리가 발생할 수 있고, 너무 길면 유저 경험이 느려질 수 있습니다.

스로틀링의 단점

• 불필요한 호출 제한: 스로틀링은 일정한 시간 간격으로 이벤트를 처리하여 불필요한 호출을 제한하나, 이로 인해 실제 이벤트가 놓치는 경우가 발생할 수 있습니다.

• 긴 시간 동안 이벤트 무시: 스로틀링된 함수가 일시적으로 비활성화되는 동안 긴 시간 동안 이벤트가 무시될 수 있습니다. 이는 사용자 경험에 악영향을 줄 수 있습니다.

---

useDeferredValue 와 useTransition의 장점

useDeferredValue의 장점

• 선별적인 업데이트: useDeferredValue는 값의 업데이트 우선순위를 조절하여 중요한 작업에 우선순위를 부여할 수 있습니다. 이를 통해 메인 스레드의 블로킹을 방지하면서도 높은 우선순위의 작업을 더 빠르게 처리할 수 있습니다.

• 고성능 상호작용: 유저 입력과 같이 중요한 상호작용에 대한 반응성을 높일 수 있습니다.

useTransition의 장점

• 상태 변화 우선순위 조절: useTransition을 활용하면 상태 변화의 우선순위를 지정하여 중요한 작업을 우선적으로 처리할 수 있습니다. 이로써 중요한 상호작용에 우선순위를 부여하면서도 백그라운드 작업을 놓치지 않게 됩니다.

• 부드러운 사용자 경험: 유저 입력과 같은 중요한 상호작용을 지연시키지 않으면서도 더 나은 성능과 부드러운 사용자 경험을 제공할 수 있습니다.

---

결론

디바운스와 스로틀링은 과거에 사용되던 성능 최적화 기술이지만, 그만큼 어려움과 문제점을 안고 있었습니다. React 18에서 도입된 useDeferredValue와 useTransition은 concurrent rendering을 통해 이러한 문제를 해결하고, 더 높은 성능과 유연성을 제공합니다. 디바운스와 스로틀링보다 훨씬 더 강력하고 정교한 처리를 가능하게 함으로써 사용자 경험을 더욱 향상시킬 수 있습니다.