React 19 RC 테스트하며 발견한 use 훅의 실전 활용법

배경

회사 프로젝트에서 React 19 RC를 테스트 환경에 적용해보기로 했다. 가장 관심이 갔던 것은 새로 추가된 use 훅이었다. 기존에 Suspense와 함께 사용하던 data fetching 로직을 개선할 수 있을 것 같았다.

기존 방식의 문제

지금까지는 Suspense 내부에서 데이터를 가져오려면 별도의 상태 관리나 라이브러리가 필요했다.

const UserProfile = ({ userId }: Props) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUser(userId).then(setData).finally(() => setLoading(false));
  }, [userId]);
  
  if (loading) return <Spinner />;
  return <div>{data.name}</div>;
};

use 훅으로 개선

React 19의 use 훅은 Promise를 직접 받을 수 있다.

const UserProfile = ({ userPromise }: Props) => {
  const user = use(userPromise);
  return <div>{user.name}</div>;
};

// 사용
<Suspense fallback={<Spinner />}>
  <UserProfile userPromise={fetchUser(userId)} />
</Suspense>

조건부 실행 가능

기존 훅들과 달리 use는 조건문 안에서도 사용 가능했다. 이 부분이 실무에서 유용했다.

const Component = ({ cached, promise }: Props) => {
  const data = cached ?? use(promise);
  return <div>{data}</div>;
};

실전 적용 시 주의점

Promise는 컴포넌트 외부에서 생성해야 한다. 렌더링마다 새 Promise를 만들면 무한 루프가 발생한다.
React Query나 SWR 같은 캐싱 레이어는 여전히 필요하다. use는 단지 Promise 언래핑 도구일 뿐이다.
에러 처리는 Error Boundary로 해야 한다.

결론

React 19가 정식 출시되면 기존 fetching 로직을 점진적으로 마이그레이션할 계획이다. 보일러플레이트가 확실히 줄어드는 것은 좋지만, 기존 생태계와의 조화를 고려해야 할 것 같다.