[React] React 19에 추가된 핵심 기능

React 공식문서

 

React 19 버전이 24년 12월 5일에 stable로 올라오면서, 주요 기능들에 대해 공식문서를 기준으로 정리했습니다.

GitHub React 19

Actions

이전에는 pending states, errors, optimistic updates, and sequential requests를 수동으로 처리해야 했습니다.

다음은 기존에 pending, error를 useState를 활용하여 핸들링하는 예제입니다.

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    }
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

 

React 19에서는 useTransition이 비동기 함수와 함께 사용할 수 있도록 업데이트 되었고, 다음 예제와 같이 pending 상태를 다룰 수 있습니다.

 

cf. useTransition은 React 18 버전에도 있었으며 이번 업데이트를 통해 비동기 함수와 사용이 가능하도록 개선되었습니다.

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

 

기존에는 useState를 사용하여 setIsPending(true), setIsPending(false)를 직접 처리해주어야 했던 것과는 다르게, useTransition을 사용하면 startTransition으로 감싸주는 것 만으로도 pending 여부를 관리할 수 있어, 데이터가 변경되는 동안 현재 UI를 반응성 있고 상호 작용적으로 유지할 수 있습니다.

 

useActionState

form action의 결과를 기반으로 state를 업데이트 할 수 있도록 제공하는 Hook 입니다. (Canary 버전에서는 useFormState로 불렸습니다.)

import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

 

state는 form을 제출했을 때 액션에서 반환되는 값으로, form 제출 이전에는 initialState로 설정됩니다.

 

useFormStatus

props drilling 없이 useFormStatus 훅을 통해 form의 상태를 확인할 수 있습니다. 공식문서를 통해 반환값에 대한 상세한 설명을 확인할 수 있습니다.

const { pending, data, method, action } = useFormStatus();

import {useFormStatus} from 'react-dom';

function DesignButton() {
  const {pending} = useFormStatus();
  return <button type="submit" disabled={pending} />
}

useOptimistic

useOptimistic을 사용하면 비동기 작업이 진행 중일 때 다른 상태를 보여줄 수 있습니다.

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

• state : 작업이 대기 중이지 않을 때 초기에 반환되는 값
• updateFn(currentState, optimisticValue) : 파라미터를 받아 업데이트되는 낙관적인 상태를 반환함. 순수함수여야 함
• optimisticState : 낙관적 상태. 대기 중이지 않을 때는 state와 동일하며, 대기 중인 경우 updateFn에서 반환하는 값이 들어감
• addOptimistic : 낙관적 업데이트를 진행하고자 할 때 호출하는 dispatch 함수

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js";

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

 

use

promise를 use와 함께 사용할 경우, React는 promise가 resolve될 때까지 Suspense 됩니다. 기존의 hook과는 다르게 early return문 뒤처럼 conditional 하게도 호출이 가능합니다.

import {use} from 'react';

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

function Page({commentsPromise}) {
  // When `use` suspends in Comments,
  // this Suspense boundary will be shown.
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  )
}

 

use에서 promise는 render 시에 사용할 수 없으며, 사용을 원할 경우 컴포넌트 밖에서 promise를 생성 후 사용해야 에러가 발생하지 않습니다.

https://github.com/facebook/react/issues/30709

useTransition, useActionState, useFormStatus

공식문서를 읽으며 위 세가지가 비슷하게 느껴져 각각의 쓰임새를 정리했습니다.

• useTransition : 비동기 작업 중 UI의 응답성을 유지, 로딩 상태 관리
• useActionState : 폼 제출 시 비동기 작업 상태와 에러를 간단하게 관리하기 위함
• useFormStatus : 폼의 제출 상태를 하위 컴포넌트에서 확인하고 UI를 조정할 때 사용

useTransition, use

추가로, useTransition, use 모두 비동기를 처리하지만 각 hook이 필요한 상황이 다를 것 같아 공식문서의 예제를 바탕으로 각각 어떤 상황에서 사용되면 좋을 지 정리해보았습니다.

useTransition

• 클라이언트 컴포넌트에서 상태를 업데이트 하는 경우
• 기존에 클라이언트 컴포넌트에서 useState로 isLoading, isPending 등을 관리한 경우

useTransition을 사용할 때와 사용하지 않을 때의 차이

// useTransition을 사용할 때
  const [isPending, startTransition] = useTransition();

  const updateQuantityAction = async newQuantity => {
    // To access the pending state of a transition,
    // call startTransition again.
    startTransition(async () => {
      const savedQuantity = await updateQuantity(newQuantity);
      startTransition(() => {
        setQuantity(savedQuantity);
      });
    });
  };

// useTransition을 사용하지 않을 때
  const [isPending, setIsPending] = useState(false);

  const onUpdateQuantity = async newQuantity => {
    // Manually set the isPending State.
    setIsPending(true);
    const savedQuantity = await updateQuantity(newQuantity);
    setIsPending(false);
    setQuantity(savedQuantity);
  };

• useTransition을 사용하는 경우 상태값이 한번만 업데이트 됨
• useTransition을 사용하지 않는 경우 상태값이 여러번 업데이트 됨

useTransition을 사용하는 경우 Total이 한번만 업데이트 됨

 

 

 

useTransition을 사용하지 않는 경우 Total이 여러번 업데이트 됨

 

use

• if 조건문이나 for 반복문 내부에서 사용하는 경우

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}

 

• 서버 컴포넌트에서 Promise를 생성해서 클라이언트로 전달하는 경우 사용

React 공식문서: use 주의사항 중

// 서버 컴포넌트
import { fetchMessage } from './lib.js';
import { Message } from './message.js';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// 클라이언트 컴포넌트
// message.js
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

 

과연 바로 적용할 수 있을까?

최근 React 19에 대한 생각을 나누기 위해 스터디를 시작했습니다. 그 첫번째로 공식문서를 읽고 생각을 나누는 자리를 가졌는데요, 저의 경우 공식문서를 읽으며 기존에 작성했던 몇 가지 케이스들이 떠올라 바로 적용을 해도 되겠다고 생각을 했지만 몇 분은 이미 React Query나 React-Hook-Form, Next.js를 통해 해결되고 있는 부분인데 '굳이?'라는 생각을 하시는 분들도 계셨습니다. 스터디를 통해 보다 다양한 의견을 확인할 수 있었고, 실제 예제를 실행해보면 또 다른 생각이 들 것 같아 예제 실습을 이어서 진행하려고 합니다. 실습을 통해 추가적으로 얻은 인사이트는 별도의 게시물로 추가 작성할 예정입니다.