📚 Reference

• 공식 문서 1

📜 Chapter

‣

useActionState

• useActionState
• 폼 액션의 결과를 기반으로 컴포넌트의 상태를 관리하는 React 훅이다.
• 이전 React Canary 버전에서는 useFormState라는 이름으로 불렸으며, 폼 제출과 같은 비동기 작업의 상태(성공, 실패, 로딩 등)를 간편하게 처리하도록 설계되었다.
• 이 훅은 특히 서버 컴포넌트와 함께 사용할 때, 서버에서 처리된 폼 제출 결과를 하이드레이션(hydration) 전에 표시할 수 있어 유용하다.

사용법

• useActionState는 컴포넌트의 최상위 레벨에서 호출되며, [state, dispatch, isPending] 배열을 반환한다.

const [state, dispatch, isPending] = useActionState(action, initialState);

• action: 폼이 제출될 때 호출되는 함수이다. 이 함수는 폼의 데이터와 초기 상태를 인수로 받는다.
• initialState: 훅이 반환하는 상태의 초기값이다.
• state: action 함수가 반환한 최신 상태이다.
• dispatch: 폼의 action 속성에 직접 연결할 수 있는 새로운 액션 함수이다. 이 함수는 사용자가 폼을 제출할 때 action 함수를 호출한다.
• isPending: 액션이 현재 대기 중(로딩 중)인지 여부를 나타내는 불리언(boolean) 값이다.