[React] React 19 Beta 살펴보기

React 19 Beta가 npm에 올라왔다.

React 블로그에 올라온 글을 보고 개인적으로 중요하다 생각하는것 몇 가지를 정리해 보았다.

전체 내용은 아래 링크에서 확인할 수 있다.

https://react.dev/blog/2024/04/25/react-19#whats-new-in-react-19

React 19 Beta – React

 

Action

async transition을 사용하는 함수를 일컫는다.

pending state, oprimistic updates, error handling, forms를 쉽게 핸들링 할 수 있게 되었다.

 

useActionState hook

Action을 더 쉽게 사용할 수 있게 해주는 hook이다.

예시 :

const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {
  const error = await updateName(newName);
  if (error) {
    // 실패시 동작
    return error;
  }
  // 성공시 동작
});

 

기존에 isLoading, isError와 같은 상태를 useState등을 이용해 별도로 state를 관리해야했기에 TanStack Query(react query)와 같은 라이브러리를 사용했었다.

이번에 새로 추가된 useActionState hook을 이용하면 api통신시 Action의 관리가 더 편해질 것으로 생각된다.

 

useOptimistic hook

useOptimistic hook을 통해  Optimistic updates를 쉽게 구현할 수 있게 되었다.

예시 :

function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);	// 새로 추가된 useOptimistic hook

  const submitAction = async formData => {
    const newName = formData.get("name");
    setOptimisticName(newName);	// 여기서 newName을 즉시 render한다.
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

 

Optimistic updates를 짧게 설명하면 "api의 response가 긍정적이라 가정하고, 결과를 미리 ui에 반영하는 것"이라 할 수 있을것 같다.

기존에는 Optimistic updates를 별도로 구현해야 했고, 꽤 번거로웠던걸로 기억한다. 이번에 새로 업데이트된 useOptimistic을 이용하면 코드 길이도 줄어들고, 읽기도 더 편해질 것으로 예상된다.

Optimistic updates는 개인적으로 중요한 요소라고 생각하기에 나중에 별도로 다뤄보려 한다!

 

<form> Actions

<form>태그의 action prop에 함수를 전달할 수 있게 되었다.

<form action={actionFunction}>

<form> Action이 성공하면 React는 자동으로 form을 초기화한다. 또한 requestFormReset를 통해 수동으로 초기화가 가능하다.

 

useFormStatus hook

form데이터에 디자인 시스템을 적용할 때 컴포넌트에 form의 상태를 전달할 수 있다.

예시 :

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();	// 컴포넌트에서 form데이터 사용
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

 

use API

새롭게 추가된 API로, promise, context와 같은 리소스를 읽어올 때 사용한다.

기존의 hook과 다른점은 조건문, 루프문에서도 사용할 수 있다.

예시 :

const theme = use(ThemeContext);

 

ref를 prop으로 취급

더이상 forwardRef가 필요하지 않으며, ref prop으로 컴포넌트에 전달할 수 있다.

 

Context provider

<Context.Provider>대신 <Context>를 사용하도록 변경되었다.