[React] useActionState

useActionState

useActionState는 useState처럼 state를 업데이트할 수 있도록 제공하는 React Hook이다.

useState와 다른 점은 폼 액션의 결과를 기반으로 한다는 점이다.

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

매개변수

• fn : 폼이 제출되거나 버튼을 눌렀을 대 호출될 함수.
• initialState : 초기 state로 설정하고자 하는 값
• optional permalink : 폼이 수정하는 고유의 URL이 포함된 문자열.

반환값

useActionState는 다음 3가지 값들이 포함된 배열을 반환한다.

1. 현재 state. 첫 번째 렌더링에서는 전달한 initialState와 일치하며 액션이 실행된 이후에는 액션에서 반환한 값과 일치한다.
2. form 컴포넌트의 action prop에 전달하거나 폼 내부 button 컴포넌트의 formAction prop에 전달할 수 있는 새로운 액션
3. 대기 중인 전환(Pending Transition)이 있는지 여부를 알려주는 isPending 플래그

기존 React에서는 폼 제출시 'onSubmit'을 사용해 폼 데이터를 처리했지만, 폼 제출 시 비동기 작업을 처리하기 위해 추가적인 로직을 구현해야 했다.

useActionState는 React 19에서 새로 도입된 훅으로, 폼(form)의 액션 결과에 따라 상태를 관리하고 업데이트하는 과정을 단순화해준다. 이를 통해 비동기 작업의 상태 관리, 로딩 상태 표시, 에러 처리 등을 더욱 간편하게 구현할 수 있다.

사용 예제

import { useActionState } from 'react';

async function updateName(previousName, formData) {
  const newName = formData.get('name');
  // 서버에 새로운 이름을 업데이트하는 로직
  return newName;
}

export default function UpdateNameForm() {
  const [name, updateNameAction, isPending] = useActionState(updateName, '');

  return (
    <form action={updateNameAction}>
      <p>현재 이름: {name}</p>
      <input name='name' />
      <button type='submit' disabled={isPending}>
        {isPending ? '업데이트 중...' : '업데이트'}
      </button>
    </form>
  );
}