React 19 ) useActionState( 구 useFormState )

useFormState는 이전에 React Dom에서 제공했었고 이제는 useActionState로 이름이 바뀌어 제공된다. 

목적은 폼의 동작을 쉽게 관리하기 위함이다.

 

 

useActionState ( 구 useFormState )

const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);

 

* 목적

- 폼 제출 ( 이걸 액션이라고 한다 ) 을 호출할 때, 이전 상태와 함께 폼 데이터를 인자로 받아 처리한 후, 그 결과 상태를 관리해준다.

 

* 기능

- 폼 제출 시 자동으로 pending 상태를 관리한다.

- 서버액션 ( 데이터 업데이트, 검증 등 )의 결과를 상태로 반영하여 이후 렌더링에 활용할 수 있다.

- 이전 Canary 버전에서의 이름 useFormState와 다르게 더 범용적인 '액션' 개념을 반영하여 이름이 useActionState로 변경되었다. 

 

* 폼 액션 함수

- 폼 액션함수는 일반적인 함수로 작성할 수 있으며, 첫번째 인자로 이전 상태 ( 또는 초기상태 )를 , 두번째 인자로 FormData를 받습니다.

- 이 함수의 반환값이 폼의 새로운 상태로 반영된다. 

- 반환 값은 오류나 성공 메시지 등 원하는 어떤 값이든 가능하며, 이를 활용하여 UI를 업데이트 할 수 있다. 

 

* 폼의 action prop에 함수전달 

- React 19에서는 <form> 요소의 action prop에 함수를 전달할 수 있다. 

- 이렇게 전달된 함수는 제출 시 자동으로 실행되어 폼 데이터와 함께 액션 로직이 처리된다. 

- 또한 자바스크립트가 비활성화된 환경에서도 기본 폼 제출 동작을 지원한다. ( 이를 프로그레시브 향상이라고 한다. ) 

 

엉터리 예시코드지만 대충 다음을 알 수 있다. 

저기서 말하는 formAction은 폼에서 제출을 했을 때 원하는 동작이다. 이 동작은 state의 업데이트를 포함하며, isPending은 그 로딩 상태를 알려준다. 

import axios from "axios";
import { useActionState, useEffect, useState } from "react";

export default function ActionIndex() {
  const [state, formAction, isPending] = useActionState(async () => {
    const url: string = "https://jsonplaceholder.typicode.com/todos";
    const response = await axios.get(url);
    return response.data;
  }, []);

  useEffect(() => {
    formAction();
  }, []);

  useEffect(() => {
    console.log(state);
  }, [state]);

  return (
    <>
      <p>actionIndex</p>
    </>
  );
}

 

 

요건 공식 페이지 예시 코드

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>
  );
}