반응 서버 기능

서버 함수는 클라이언트에서 참조되지만 서버에서 실행되는 함수입니다.

예:

'use client'

import { useActionState } from "react";

import { updateName } from "@/app/react-19-server-function/actions";


export default function Page() {

    const [error, submitAction, isPending] = useActionState(
        async (_previousState, formData) => {
            const error = await updateName(formData.get("name") as string);
            if (error) {
                return error;
            }

            return ""
        },
        "",
    );

    return <div>
        <h1>React 19: Server Functions</h1>
        <fieldset>
            <div>Name</div>

            <form action={submitAction}>
                <input type="text" name="name" />

                <button type="submit" disabled={isPending}>Save</button>
            </form>

            <div>
                {error && <p>{error}</p>}
            </div>
        </fieldset>
    </div>
}

useActionState에 대한 자세한 내용은 이전 게시물을 확인하세요

updateName을 가져오는 방법을 확인하세요.

import { updateName } from "@/app/react-19-server-function/actions";

useActionState로 전달됩니다.

즉, 양식이 제출될 때마다 submitAction을 실행한 다음 updateName을 호출합니다.

이제 updateName을 확인해 보겠습니다.

"use server";

export async function updateName(name) {
  if (name?.length < 2) {
    return "Name must be at least 2 characters.";
  }

  return "";
}

이름의 길이를 확인하는 아주 간단한 기능입니다. 2자 미만이면 오류가 반환됩니다. 그렇지 않으면 오류가 없음을 의미하는 빈 문자열을 반환합니다.

또 한 가지 주목해야 할 점은 "서버 사용"이라는 지시어입니다. 이는 React에게 함수가 서버에서 실행될 것임을 알려주므로 클라이언트가 사용할 수 있는 참조를 생성합니다.

UI는 매우 간단하며 다음과 같습니다.

값 없이 양식을 제출하면 몇 가지 흥미로운 세부정보가 포함된 POST 네트워크 요청이 표시됩니다.

• 콘텐츠 유형: 텍스트/x-컴포넌트입니다.

• 페이로드가 비어 있어도 자동으로 전달됩니다.

• 응답은 일종의 JSON과 같습니다.

모래밭

• 코드베이스

결론

서버 기능은 서버에서 실행되는 기능입니다. 대안은 수동으로 가져오기를 사용하여 백엔드에 요청하고 상태 코드 읽기 및 페이로드 구문 분석과 같은 작업을 처리하는 것입니다.

서버 기능을 사용하면 통신 부분에 대해 걱정할 필요가 없습니다. "use server" 지시문을 사용하여 함수를 생성하고 이를 클라이언트 파일로 가져오면 프레임워크가 나머지를 처리합니다.

위 내용은 반응 서버 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!