React 19의 폼 관리 기능과 새로운 use API

React 새로운 <form> Actions 기능

React 19에서는 새로운 <form> 기능과 함께 Actions를 통합했습니다. 이제 <form>, <input>, <button> 요소의 action 및 formAction 프롭에 함수를 전달해 폼을 제출할 수 있습니다.

 

<form action={actionFunction}>

 

액션이 성공하면, React는 비제어 컴포넌트의 폼을 자동으로 리셋합니다. 폼을 수동으로 리셋해야 하는 경우, 새로운 requestFormReset React DOM API를 호출할 수 있습니다.

 

use API, 새로운 기능

React19에서 새로운 API, use 를 도입했습니다. use 를 사용해 promise, Suspend를 활용할 수 있습니다.

 

import { use } from 'react';
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

function Page({ commentsPromise }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

 

use  API를 통해 비동기 데이터를 읽어오고 데이터가 준비될 때 까지 Component Rendering을 지연시킬 수 있습니다. use 를 통해서 데이터 로딩과 사용자 경험을 향상 시킬 수 있습니다.