React 19 RC에서 use() 훅 테스트해보기

배경

React 19 RC가 공개되면서 공식 문서에서 use() 훅을 소개했다. 기존에는 데이터 페칭을 Suspense와 함께 사용하려면 서드파티 라이브러리나 복잡한 패턴이 필요했는데, use()를 사용하면 Promise를 직접 처리할 수 있다고 해서 테스트 프로젝트에 적용해봤다.

use() 훅의 특징

기존 훅들과 다르게 조건문 안에서도 사용 가능하다는 점이 가장 큰 차이였다. Promise나 Context를 인자로 받아서 처리한다.

import { use, Suspense } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise);
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  const userPromise = fetch('/api/user').then(r => r.json());
  
  return (
    <Suspense fallback={<Loading />}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

기존 패턴과 비교

현재 프로젝트에서는 React Query를 사용 중이었다. 간단한 케이스에서는 use()가 더 직관적이었지만, 캐싱, 재시도, 무효화 같은 실무 요구사항을 고려하면 여전히 React Query가 필요했다.

조건부 렌더링이 필요한 경우에는 확실히 유용했다.

function Comments({ commentsPromise }) {
  const comments = commentsPromise ? use(commentsPromise) : [];
  
  return comments.map(comment => (
    <Comment key={comment.id} data={comment} />
  ));
}

결론

React 19가 정식 출시되면 간단한 데이터 페칭이나 동적 Context 사용에는 use()를 활용할 예정이다. 하지만 복잡한 상태 관리가 필요한 부분은 기존 라이브러리를 유지하는 게 현실적이라고 판단했다. RC 단계이므로 프로덕션 적용은 정식 버전을 기다려야겠다.