React 새로운 후크 useActionState

일반적으로 양식 작업 시 다음을 수행할 수 있습니다.

a) 로더 표시

b) 유효성 검사 오류 표시

이는 종종 몇 가지 상태 변수를 관리하는 것을 의미합니다. 하지만 React 19에 도입된 새로운 useActionState 후크를 사용하면 이제 이를 처리하는 더 간단한 방법이 있습니다.

모래밭

• 데모

• 코드베이스

리액트 훅: useActionState

다음 스니펫에서 useActionState가 어떻게 사용되는지 확인하세요.

import { useActionState } from "react";
import Loader from "@/components/loader";

function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));

      if (error) {
        return error;
      }

      return "";
    },
    ""
  );

  return (
    <form action={submitAction}>
      Name: <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Save
      </button>
      {isPending && <Loader />}
      {error && <p>{error}</p>}
    </form>
  );
}

몇 가지 언급할 사항:

• useActionState는 세 가지를 반환합니다.

1. 첫 번째 변수인 error는 오류용입니다. 이 경우에는 문자열이지만 실제로는 어떤 유형이든 될 수 있습니다.

2. 두 번째 변수 submitAction은 양식 제출을 실행하는 함수입니다.

3. 세 번째 변수 isPending은 보류 상태를 나타내는 부울입니다. 양식을 제출할 때 요소를 비활성화하거나 스피너를 표시하는 데 유용합니다.

• useActionState에는 두 가지 매개변수가 필요합니다.

1. 첫 번째 매개변수는 양식이 제출될 때 submitAction에 의해 실행되는 함수입니다.

2. 두 번째 매개변수는 오류의 초기값입니다. 이 경우에는 빈 문자열이지만 대신 "모든 필드 채우기"와 같은 것을 사용할 수 있습니다.

• useActionState는 기본적으로 FormData의 인스턴스인 formData를 제공하며, 이는 양식의 필드를 나타내는 객체입니다.

양식 입력 필드:

<input type="text" name="name" />

다음과 같이 읽을 수 있습니다.

formData.get("name");

name은 입력 필드의 이름입니다.

• error는 서버의 오류를 표시합니다. 없으면 비어있습니다.

• isPending은 양식이 제출되면 후크에 의해 자동으로 true로 업데이트되고 백엔드 응답이 수신되면 다시 false로 설정됩니다.

오류가 없으면 useActionState가 양식 재설정도 처리합니다.

백엔드에 대한 요청

이 데모에서 updateName 함수는 매우 기본적이며 이름을 전달하여 백엔드에 POST 요청을 보냅니다. 백엔드가 오류를 반환하면 함수가 오류를 반환합니다. 그렇지 않으면 빈 문자열을 반환합니다. 이는 서버에서 오류가 없음을 의미합니다.

async function updateName(name) {
  const response = await fetch("/lambda-function", {
    method: "POST",
    body: JSON.stringify({ name }),
  });

  if (!response.ok) {
    const { message } = await response.json();
    return message;
  }

  return "";
}

백엔드 POST 요청 핸들러

이름이 2자 이상의 문자열인지 확인하는 간단한 람다 함수를 사용하고 있습니다. 또한 UI에 스피너를 표시할 시간을 주기 위해 2초의 지연이 있습니다.

import { useActionState } from "react";
import Loader from "@/components/loader";

function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));

      if (error) {
        return error;
      }

      return "";
    },
    ""
  );

  return (
    <form action={submitAction}>
      Name: <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Save
      </button>
      {isPending && <Loader />}
      {error && <p>{error}</p>}
    </form>
  );
}

결론

React 19의 useActionState 후크는 양식에 항상 있어야 하는 두 가지, 즉 보류 상태와 유효성 검사 오류를 처리할 때 유용합니다. 후크는 이러한 "상태 변수" 업데이트를 처리하고 값을 비교하려는 경우 이전 상태에 대한 참조도 제공합니다.

양식을 제출하고 오류가 반환되지 않은 후 어떻게 되는지 여부는 신청자에게 달려 있습니다. 대부분의 경우 이는 사용자를 다른 페이지로 리디렉션하거나 성공 메시지를 표시하는 것을 의미합니다.

위 내용은 React 새로운 후크 useActionState의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!