React 19 useTransition vs React 18 pending 처리 : 로딩 상태 관리의 차이점

💡React 19의 useTransition은 비동기 업데이트를 우선순위가 낮은 작업으로 처리하여 UI 반응성을 유지하면서도 로딩 작업을 백그라운드에서 진행할 수 있습니다. 이로 인해 사용자 경험이 개선되고, 더 부드러운 로딩 처리와 상호작용을 제공합니다.

React 18에서의 pending 처리

React 18에서 pending 상태를 처리하는 가장 일반적인 방법은 Suspense를 사용하는 것입니다. Suspense는 비동기적으로 데이터를 로드할 때 로딩 중임을 나타내기 위해 컴포넌트 트리에서 로딩 상태를 감싸는 데 사용됩니다. 그러나, 로딩 상태가 길어지면 사용자 경험을 저하시킬 수 있습니다. 예를 들어, Suspense 내부에서 로딩 중임을 나타내는 UI를 만들 때, 로딩 시간을 관리하는 것은 여전히 개발자의 몫입니다.

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

function App() {
  // 로딩 상태와 데이터 상태를 관리하는 useState
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const loadData = () => {
    setLoading(true); // 로딩 시작
      
     axios.get('find/project')
    .then(res => setData(res.data))
    .finally(() => setLoading(false));
	};
  
  return (
    <div>
      <button onClick={loadData} disabled={loading}>Load Data</button>
      {loading ? (
        <div>Loading...</div> // 로딩 중일 때 표시
      ) : (
        <div>Data: {data.join(', ')}</div> // 데이터가 로딩되면 표시
      )}
    </div>
  );
}

React 19에서 useTransition 사용

React 19에서 도입된 useTransition은 비동기 작업을 더욱 직관적이고 효율적으로 처리할 수 있게 해줍니다. useTransition은 상태 업데이트가 "우선순위가 낮은" 작업으로 간주될 수 있도록 하여, 중요한 작업은 즉시 업데이트하고, 긴 로딩 작업은 백그라운드에서 처리하게 됩니다. 이는 비동기 작업 중 로딩 상태를 더 부드럽게 처리할 수 있게 하며, 사용자 경험을 개선합니다.

useTransition은 두 가지 값을 반환합니다: isPending (작업이 대기 중인지 여부)과 startTransition (비동기 작업을 시작하는 함수). 이를 통해 UI는 사용자가 기다리지 않도록 즉각적인 반응성을 유지할 수 있습니다.

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

  const fetchData = () => {
    startTransition(() => {
      // 비동기 데이터 로딩
      setTimeout(() => {
        setData([1, 2, 3, 4, 5]);
      }, 2000);
    });
  };

  return (
    <div>
      <button onClick={fetchData}>Load Data</button>
      {isPending ? <div>Loading...</div> : <div>Data: {data.join(', ')}</div>}
    </div>
  );
}

결론

React 19에서 도입된 useTransition은 비동기 작업 처리에서 큰 개선을 이루었으며, 로딩 상태 관리의 새로운 방법을 제공합니다. Suspense와 useState를 사용한 방법은 여전히 유용하지만, React 19의 useTransition은 더 나은 성능과 사용자 경험을 제공합니다.