리액트 훅 | useActionState에 대해 알아보기

 

리액트 19 버전으로 업데이트되면서 새로 생긴 훅이 존재했는데요,

그중 하나가 바로 useActionState 입니다 !!

 

이번 글에서는 useActionState에 대해 한번 살펴보겠습니다.

 

1. useActionState란?

먼저 공식문서를 살펴보니, Action이라 불리는 이 친구는

주로 비동기 요청(특히 폼 제출, 서버 호출 등)을 감싸는 함수를 의미합니다.

 

useActionState는 이 Action을 감싸고 다음과 같은 역할을 수행합니다.

- 반환값을 상태로 저장

- 로딩 상태를 자동 관리

 

즉, 폼 제출 후 액션 함수가 반환한 결과가 곧 컴포넌트의 상태가 되고,

로딩 상태도 isPending으로 자동 추적됩니다.

 

 

2. useActionState 사용 이유

기존 방식 (useState)

- 결과, 오류, 로딩을 각각 useState로 선언

- 버튼 클릭 시 다음과 같은 과정을 직접 작성

  (1) setIsPending(true)

  (2) 서버 요청 / 로직 수행

  (3) 성공이면 setNumbers(...), 실패면 setError(...)

  (4) 마지막에는 setIsPending(false)

=> 즉, 상태 토글과 결과 반영까지 직접 작성해야 한다는 번거로움이 존재했습니다.

 

useActionState 방식

- 액션 함수가 반환한 값이 곧 상태

- 로딩도 자동으로 isPending에 반영 (직접 설정할 필요 X)

- <form action={formAction}> 으로 제출하면 끝

=> 결과, 오류, 로딩 관련 코드 대부분을 없앨 수 있어서 코드가 짧아지고 실수도 줄어듭니다.

 

3. useActionState 기본 형태

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

 

1) actionFn

  - 폼이 제출되거나 버튼이 클릭될 때 실행되는 함수

  - 첫번째 인수 : 이전 상태(prevState)

  - 이후 인수 : 폼 데이터(FormData) 등 일반 폼 액션에서 받는 값

  - 반환값은 컴포넌트의 상태가 됨

async function actionFn(prevState, formData) {
  // prevState: 이전 상태
  // formData: 폼에 입력된 값
  return { ... }; // 이 반환값이 state로 자동 반영됨
}

 

2) initialState

  - 처음 렌더링될 때 state가 가질 값

  - 직렬화 가능한 값이면 무엇이든 가능 (객체, 배열, 문자열 등)

const initialState = { numbers: null, error: null };

 

3) permalink (선택)

  - 폼이 수정하는 고유한 페이지 URL

  - 일반적인 클라이언트 전용 앱이라면 생략 가능

 

4) 반환값

useActionState는 배열을 반환합니다.

반환값	설명
state	액션 실행 결과(액션 함수가 반환한 값)
formAction	<form action={formAction}> 또는 <button formAction={formAction}> 에 넣을 액션 실행 함수
isPending	액션일 실행 중이면 true, 아니면 false

 

 

4. 예제를 통해 살펴보기

이번에는 로또 번호 생성기를 예로 들어서,

useState버전과 useActionState 버전을 비교해 보겠습니다.

(1) useState 버전 - 모든 상태를 직접 관리

특징

- 상태 3개(numbers, error, isPending)를 각각 관리

- 로딩 시작/종료, 결과/에러 세팅까지 모두 수동 처리

- 코드가 길고, 토글 시점 실수 가능성 존재

 

(2) useActionState 버전 - 반환값과 로딩을 자동 관리

특징

- lottoAction의 반환값이 자동으로 state에 반영

- 로딩 상태(isPending) 자동 관리

- form 제출만으로 실행 가능 (onClick 핸들러 불필요)

- 코드가 훨씬 짧고 명확함

 

비교 정리

구분	useState	useActionState
상태 선언	3개(numbers, error, isPending)	1개(state), 자동 로딩
로딩 관리	수동(setIsPending)	자동(isPending)
결과/에러 반영	setNumbers, setError 직접 호출	액션 반환값 자동 반영
호출 방식	버튼 onClick 이벤트	<form action> 제출

 

이렇게 코드를 살펴보면서 "왜 useActionState가 간단하고 안전한지"를 바로 느낄 수 있습니다.

---

마무리

useActionState는 React19에서 새로 추가된 훅으로,

폼 제출이나 서버 호출과 같은 비동기 액션의 결과와 로딩 상태를 자동으로 관리해 줍니다.

 

또한, 기존 useState 방식과 다르게 액션 함수의 반환값이 곧 상태가 되며

로딩은 isPending으로 자동 추적되고, form 제출만으로 호출이 가능합니다.

 

덕분에 코드의 길이는 짧아지고, 상태 관리 실수를 줄어듭니다 !

 

다만, 폼이 필요 없는 단순한 UI나 로컬 상태 관리라면 기존 useState가 더 간단할 수 있다는 사실 !

상황에 따라 적절한 방식을 선택하는 것이 중요합니다.