Actions ?

액션은 비동기 작업을 처리하는 함수이며, 서버에 데이터를 보내거나 데이터베이스를 업데이트하는 등의 비동기 작업을 처리할 때 사용됩니다. React 19에서 도입된 액션은 이러한 작업을 더 효과적으로 관리할 수 있도록 도와줍니다.

기존 React의 데이터 처리

기존 react에서는 데이터를 변형한 후 다음 응답을 통해 상태를 업데이트 하는 방법을 사용하였습니다. 이를 위해서 pending state(대기 상태), errors(에러), optimistic updates(낙관적 업데이트), sequential requests(연속 요청) 등을 수동으로 처리해야 했습니다.

import { useState } from "react";

const Form = ({ addPost }) => {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);

  const onSumbitForm = async (event) => {
    event.preventDefault(); // 폼 제출 기본 동작 방지
    setIsPending(true);
    setError(null); // 에러 초기화

    const formData = new FormData(event.target); // 폼 데이터 가져오기
    const title = formData.get("title"); // formData에서 제목 가져오기
    const content = formData.get("content"); // formData에서 내용 가져오기
    const newPost = { title, content }; // 새로운 게시물 생성

    try {
      await new Promise((resolve) => {
        setTimeout(resolve, 2000); // 2초 대기 (비동기 작업 시뮬레이션)
      });
      addPost(newPost); // 새 게시물 추가
    } catch (error) {
      setError(error);
    } finally {
      setIsPending(false);
    }
  };

  return (
    <>
      <form onSubmit={onSumbitForm}>
        <input name="title" type="text" placeholder="title" />
        <input name="content" type="text" placeholder="content" />
        <button type="submit" disabled={isPending}>
          {isPending ? "submitting..." : "submit"}
        </button>
        {error && <p>{error}</p>}
      </form>
    </>
  );
};

function App() {
  const [posts, setPosts] = useState([]); // 게시물 목록 상태
  const addPost = (newPost) => {
    // 새 게시물을 추가하는 함수
    setPosts((posts) => [...posts, newPost]);
  };

  return (
    <div>
      <Form addPost={addPost} />
      {posts.map((post, index) => (
        <div key={index}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

React 19 버전의 데이터 처리

React 19 부터는 트렌지션에서 비동기 함수를 사용하여 pending state(대기 상태), errors(에러), optimistic updates(낙관적 업데이트), sequential requests(연속 요청)를 자동으로 처리할 수 있습니다. 비동기 트랜지션 함수(Actions)은 isPending 상태를 즉시 true로 설정하고, 비동기 요청를 처리하고 isPending 을 false로 전환합니다. 이렇게 하면 데이터가 변경되는 동안 현재 UI를 반응형 및 대화형으로 유지할 수 있습니다.

비동기 트랜지션을 사용하는 함수들은 "Actions(액션)"이라고 불립니다.

React 19에서는 아래 4가지 ****처리를 위한 네 가지 비동기 트렌지션 함수(Actions)를 사용하는 훅을 제공합니다.

• peding state : 액션은 요청이 시작될 때 대기 상태를 제공하며, 최종 상태 업데이트가 완료되면 자동으로 대기 상태가 초기화됩니다.
• optimistic state : api 요청이 성공할 것이라고 낙관적으로 보고, 응답을 기다리지 않고 미리 결과값을 노출하기 위한 상태입니다.
• error handing : 액션은 에러 처리를 제공하여 요청이 실패할 경우 에러 경계(Error Boundaries)를 표시할 수 있으며, 낙관적 업데이트를 원래 값으로 자동으로 되돌립니다.
• Forms : <form> 요소는 이제 action 및 formAction 속성에 함수를 전달하는 것을 지원합니다. action 속성에 함수를 전달하면 기본적으로 액션을 사용하며, 제출 후 폼이 자동으로 초기화됩니다.

useTransition

useTransition은 상태 업데이트 pending state를 처리하는 훅입니다.

상태 업데이트가 시간이 걸리는 작업일 때, 다른 상태 업데이트가 우선 처리되도록 하여 UI가 끊기지 않도록 합니다. React 19에서는 useTransition이 비동기 함수와 함께 사용할 수 있도록 개선되었습니다. useTransition은 상태 업데이트를 '트랜지션' 상태로 처리하여, 사용자에게 매끄러운 UI를 제공합니다.