React 19 RC 주요 변경사항 정리

배경

React 19 RC가 발표되면서 몇 가지 눈여겨볼 만한 변경사항이 있어 정리했다. 당장 프로덕션에 적용하긴 어렵지만, 향후 마이그레이션을 대비해 미리 파악해둘 필요가 있었다.

주요 변경사항

1. Actions

비동기 함수를 form action으로 직접 사용할 수 있게 되었다. 기존에는 onSubmit에서 preventDefault()를 호출하고 별도로 처리해야 했다.

function UpdateProfile() {
  async function updateAction(formData) {
    await updateProfile(formData);
  }

  return <form action={updateAction}>...</form>;
}

2. useOptimistic

낙관적 업데이트를 위한 훅이 추가되었다. 이전에는 직접 상태를 관리하고 롤백 로직을 구현해야 했는데, 이제 간단해졌다.

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  async function submitAction(formData) {
    const newName = formData.get('name');
    setOptimisticName(newName);
    await onUpdateName(newName);
  }

  return (
    <form action={submitAction}>
      <p>이름: {optimisticName}</p>
      <input type="text" name="name" />
    </form>
  );
}

3. use API

Promise나 Context를 컴포넌트 내에서 직접 읽을 수 있는 새로운 API가 추가되었다.

function Note({ notePromise }) {
  const note = use(notePromise);
  return <div>{note.content}</div>;
}

그 외

• ref가 prop으로 전달 가능해져서 forwardRef가 불필요해졌다
• Context.Provider 대신 Context를 직접 Provider로 사용 가능
• cleanup 함수가 컴포넌트 unmount 시 비동기로 실행된다

소감

Actions와 useOptimistic은 실무에서 자주 마주치는 패턴을 잘 추상화한 것 같다. 다만 안정화까지는 시간이 더 필요할 것으로 보여 당장 적용은 보류했다. 올해 말쯤 정식 릴리즈가 나오면 단계적으로 도입해볼 계획이다.