React 19 Beta의 use 훅과 Server Actions 살펴보기

배경

React 19 Beta가 4월에 공개된 이후 실험적으로 테스트해볼 기회가 있었다. 가장 눈에 띄는 변화는 use 훅과 Server Actions의 정식 지원이었다.

use 훅의 특징

기존 훅과 달리 use는 조건문 안에서도 사용할 수 있다는 점이 특이했다.

function Comment({ commentId }) {
  const comment = use(fetchComment(commentId));
  
  if (comment == null) {
    return null;
  }
  
  return <div>{comment.text}</div>;
}

Promise를 직접 받아서 처리하기 때문에 Suspense와 조합하면 로딩 상태 관리가 훨씬 간결해진다.

Server Actions와 폼 처리

Next.js에서 먼저 선보인 Server Actions가 React 코어에 통합되었다. useActionState(구 useFormState)와 함께 사용하면 폼 처리가 매우 간단해진다.

import { useActionState } from 'react';

function CommentForm({ postId }) {
  const [state, formAction] = useActionState(submitComment, null);
  
  return (
    <form action={formAction}>
      <input name="comment" />
      <button type="submit">작성</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

별도의 submit 핸들러나 상태 관리 없이 서버 액션을 직접 연결할 수 있다. 에러 처리와 pending 상태도 훅이 관리해준다.

실무 적용 고려사항

아직 Beta 단계라 프로덕션 적용은 조심스럽다. 하지만 Next.js 14의 App Router를 사용 중이라면 Server Actions는 충분히 안정적으로 동작했다.

Ref 관련 API 변경(ref prop 직접 전달 가능)과 <Context> 직접 사용 등 편의성 개선도 많았지만, 가장 큰 변화는 역시 서버-클라이언트 통신 패턴의 단순화인 것 같다.

정식 릴리스는 하반기로 예상되는데, 마이그레이션 가이드를 미리 검토해두는 게 좋겠다.