React19 useActionState Hook 활용 예시

🧩배경

react 19 에 도입된 `useActionState` hook 학습한뒤 해당 hook을 활용한 예시를 만들어보았다.

🧩useActionState 특징

• `useActionState`는 form action의 결과를 기준으로 state를 업데이트 하는 훅
• `const [state, formAction, isPending] = useActionState(fn, initialState, permalink?)` 와 같이 사용
• Canary versions 에서는 `useFromState`로 불림
• hook이지만 서버컴포넌트에서도 사용 가능하다.  
• 반드시 <form> tag 내부에서 사용해야함 

🧩활용예시

`useActionState`를 이용하여 위와 같은 화면을 만들어 보았다. 위 화면의 동작 흐름은 아래와 같다.

• 첫 화면 렌더링 시 이름은 도라에몽 나이는 20이라고 적혀있다.
• 이름 input과 나이input에 사용자가 입력을 한 뒤 '제출' 버튼 클릭 한다.
• 클릭 하면 화면에 ... 제출중 이라고 표기된다. ( isPending 이용 ) 
• 2초동안 제출중 화면이 뜬뒤 사라지면서 이름: ,나이: 에사용자가 입력한 값으로 변환된다.

---

아래는 원본 코드이다. 핵심을 설명하자면...

• initialState를 통해 맨처음의 state값을 설정하였다.  
• fn 의 첫번째 인자는 현재 state이고 return 되는 값은 새로운 state가 된다.
• fn 내부에 일부러 api 동작을 모방하도록 `await Promise`를 생성하고 2초 뒤에 resolve되도록 설정하였다. ( 2초 동안 isPending 값은 true가 되고 2초 후에는 false가 될 것이다.)
• fn의 두번째 인자 `formData`를 이용하여 input에 입력되어 있는 사용자 입력값에 접근하고 해당 값으로 새로운 객체를 만들어 return 하였다.  ( 접근은 formData.get( {input의 이름} ) 과 같은 방식으로 접근하였다. ) 

import { useActionState } from "react";

// 비동기 함수
const fn = async (previousState, formData) => {
  // 일부러 promise 생성
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 2000);
  });

  // return 되는 값이 새로운 state가 됨
  return {
    name: formData.get("name"),
    age: formData.get("age"),
  };
};

const initialState = {
  name: "도라에몽",
  age: 20,
};

function UseActionStateExample() {
  const [profile, sumbmitForm, isPending] = useActionState(fn, initialState);

  return (
    <div>
      <form action={sumbmitForm}>
        <p>이름: <input name="name" type={"text"}></input></p>
        <p>나이: <input name="age" type={"number"}></input></p>
        <button type="submit">제출</button>
      </form>
      {isPending ? (
        <p>제출중...</p>
      ) : (
        <div>
          <p>이름:{profile.name}</p>
          <p>나이:{profile.age}</p>
        </div>
      )}
    </div>
  );
}

🧩후기

`useActionState`를 이용하면 코드의 수가 확 줄어들어 자주 사용하게 될 것 같다. ( 예전에는 같은 기능을 구현하기 위해 2개의 State [ state,isPending ]와 1개의 hook[ useEffect ] 을 이용해야 했지만 useActionState를 이용하면 하나의 hook만 이용하면 됨 )

 

🧩참고

https://react.dev/reference/react/useActionState

useActionState – React