非同期 데이터 변경과 처리는 현代의 웹 应用程序에서 필요한 任务입니다. 데이터를 데이터 저장소에 저장하고, 이메일을 发送하고, PDF를 다운로드하고, 이미지를 처리하는 것과 같은 任务을 서버上调用 独立的非同期 函数가 필요할 수 있습니다.

Next.js는 Server Actions를 제공합니다. 이러한 非同期 함수는 서버上调用되며, 서버 이벤트를 사용하여 데이터 변경을 처리할 수 있습니다. Server Actions는 서버와 클라이언트 컴포넌트로부터 호출되며, 데이터 수정을 처리할 수 있습니다.

Server Actions은 폼 제출 이벤트에 대응하여 해당 이벤트가 발생할 때 동작할 수 있는 것을 제공합니다. 이 articl에서는 Next.js Server Actions를 사용하여 추가적인 인자를 처리하는 실제 사용 사례에 대해 살펴봅니다.

Next.js Server Actions의 설계 패턴과 프로젝트 빌딩을 배우고 싶다면, 저는 해당 인터넷 사이트에 여기에 정ere crash course를 제공합니다.

또한, 이 articl은 동영상 자습서로 다음 사이트에서 확인할 수 있습니다:

목차

  1. 추가적인 인자를 전달하는 이유는 무엇인가요?

  2. Server Action 이용한 폼

  3. extra 인자를 전달하는 방법

  4. 숨은 필드는 어떻게 되나?

  5. 자원

extra 인자를 전달하는 이유가 무엇인가요?

폼 제출 시 서버 동작을 실행하면, 서버 동작은 자동적으로 폼 데이터를 받는 것입니다. 예를 들어 아래의 폼을 보십시오:

<form className="p-4 flex" action={updateUser}>
  <Input className="w-1/2 mx-2" type="text" name="name" />
  <Button type="submit">Update User Name</Button>
</form>

여기서는 updateUser라는 서버 동작을 폼이 제출되었을 때 실행합니다. updateUser 함수는 제출된 폼 데이터를 인자로 받아서 폼 필드 값을 추출할 수 있습니다.

아래의 코드 샘플에서 확인할 수 있듯이, updateUser 함수는 formData를 인자로 받고, 그 안의 name 필드의 값을 추출할 수 있습니다.

"use server"

export async function updateUser(formData) {
  const name = formData.get('name');
  console.log(name);
}

이 패턴은 대부분의 기본 사용 사례를 보장하는 것에 불쌍하며, 서버 동작에 추가적인 인자를 프로그램 기반으로 전달할 수 있습니다. 이러한 인자는 表单 또는 表单 데이터 또는 사용자 입력 데이터에 포함되지 않습니다. 이러한 인자는 你们이 표현하는 의미로, 你们이 서버 동작에 프로그램 기반으로 전달할 수 있습니다.

이러한 것을 이해하기 위해서는, 아래 서버 동작 코드 片段을 보시는 것이 도울 수 있습니다. 이 서버 동작은 이전에 보지 않은 것이 아닌지만, 이제는 일반적인 formData 인자와 함께 userId 추가적인 인자를 전달하고 있습니다.

"use server"

export async function updateUser(userId, formData) {
  const name = formData.get('name');
  console.log(userId);
  console.log(name);
}

userId 의 값은 응용 프로그램 내부의 것입니다. 이러한 값을 表单 제출 과정에서 사용자가 제출해야 하는 것은 아닙니다. 대신에, 你们이 서버 동작으로 이를 프로그램 기반으로 전달하여 추가적인 계산을 수행하기 위해서는 필요합니다.

그렇다, 그것이 사용할 수 있는 사례입니다. 이러한 것의 이유를 이해하고자 하는 것과 어떻게 이를 달성하는지를 이해하는 것입니다. 하지만 먼저, 表单과 그 동작하는 서버 동작을 생성해봅시다.

表单과 서버 동작

Next.js 응용 프로그램의 app 디렉터리 아래 actions 디렉터리를 생성하십시오. 그 다음, actions 폴더 내에 user.js 파일을 以下的 코드로 생성하십시오.

"use server"

export async function updateUser(formData) {
  const name = formData.get('name');
  console.log(name);

  // 이름을 任意の 것을 하고, DB에 저장하거나 수납 문서를 생성하는 것을 하세요!
}

이러한 방식으로 Next.js에서 서버 함수를 생성할 수 있습니다. 이러한 파일은 서버에서 동기적이지 않은 함수를 실행하기 위해 하나 이상의 추가적인 함수가 포함되는 특수한 파일입니다. 이를 表현하기 위해 ”use server” 지시문을 文件的 상단에 표시해야 합니다.

그 다음, 서버 동작(非阻塞 함수) updateUser가 formData를 인자로 갖고 있습니다. 함수 정의 내에서, name 값을 추출하고 콘솔에 그 값을 찍습니다.

이제 이 서버 동작을 폼에 依附시키ましょう. 그러면 프로젝트 루트 폴더 아래에 components 폴더를 생성하고, user-form.jsx라는 이름의 파일을 생성하고 다음 코드를 입력합니다:

import { Input } from "./ui/input"
import { Button } from "./ui/button"

import { updateUser } from "@/app/actions/user"

const UserForm = () => {
  return(
    <form className="p-4 flex" action={updateUser}>
      <Input className="w-1/2 mx-2" type="text" name="name" />
      <Button type="submit">Update User Name</Button>
    </form>
  )
}

export default UserForm;

이것은 간단한 React コンポーネント입니다. 이 폼은 하나의 입력 텍스트 필드가 name로 이루어져 있고, 폼을 제출하기 위한 제출 Button가 있습니다. 폼은 action 속성이 있으며, 이 속성의 값은 서버 동작 updateUser입니다. 이제, 폼에 name 값을 제출하면 이전에 discuss한 것 一样, 서버 동작은 폼 데이터의 일부로 이 값을 얻게 됩니다.

그럼 시험해봅시다. 그러면, Next.js 경로와 页面에서 UserForm コンポーネン트를 사용할 수 있는 것을 만듭니다. app 폴더 아래에 extra-args 폴더를 생성하고, app/extra-args 폴더 안에 page.js라는 이름의 파일을 생성하고 다음 코드를 입력합니다:

import UserForm from "@/components/user-form";

const ExtraArgsDemo = () => {
  return (
    <UserForm />
  )
}

export default ExtraArgsDemo;

이 것은 간단한 React 컴포넌트입니다. 이 컴포넌트는 UserForm 컴포넌트를 導入하고 JSX안에 그것을 사용합니다. 이제 로컬 서버를 실행하고 localhost:3000/extra-args 경로로 접속해봅시다. 폼이 텍스트 필드와 버튼을 갖고 있어야 합니다.

텍스트 필드에 텍스트를 입력하고 버튼을 클릭합니다.

이제, 입력한 텍스트가 서버 콘솔에 Print되었음을 확인할 수 있습니다. 왜 서버 콘sole에 而不是브라우저 콘sole에呢? 이 이유는 서버 작업은 클라이언트 浏览器 사이de 서버에서 실행되는 것입니다.

이렇게, 우리는 이러한 데이터 흐름을 Establish했습니다 :

Page => Form => Server Action

页面에 폼이 있습니다. 폼은 제출할 때 서버 작업을 실행합니다. 서버 작업은 폼 데이터를 서버 콘sole에 打印합니다.

이제, 이 조각을 进一步增强하여 서버 작업에 추가적인 인자를 전달하는 것을 시도하겠습니다.

추가적인 인자를 전달하는 方法

Page에서 UserForm コンポーネント로 userId 정보를 전달하겠습니다. 우리는 이 정보를 프로그램적으로 폼과 서버 작업에 전달하기 위해 userId 값을 가져올 것입니다.

import UserForm from "@/components/user-form";

const ExtraArgsDemo = () => {
  return (
    <UserForm userId={"1234"} />
  )
}

export default ExtraArgsDemo;

在 UserForm コンポーネント内, userId 인자를 받습니다. 이제, 이 userId 값을 updateUser 서버 작업으로 전달하는 것을 特别的に 해야 합니다.

JavaScript에는 bind() 매서드가 있습니다. 이 매서드는 우리가 Partially Applied Function(부분적으로 적용된 함수)을 생성하는 것을 도와줍니다. 이 부분적으로 적용된 함수로, 다른 함수의 기본 인자를 가진 함수를 생성할 수 있습니다.

우리의 경우, `updateUser` 함수는 ready `formData`라는 인자를 이미 가지고 있습니다. 이제 `userId`를 추가적인 인자로 전달할 수 있습니다. 새로운 함수를 생성하기 위해 `bind()` 方法을 사용하여 `userId`를 전달합니다.

const updatedUserWithId = updateUser.bind(null, userId);

`bind()` 方法的 第一个 参数 是 您正在绑定函数到的上下文。上下文处理函数与 `this` 关键字值之间的关联。在我们的案例中, 我们可以将其保留为 `null`, 因为我们没有更改它。之后, 我们传递了新的参数 `userId`。`bind()` 方法既适用于服务器端组件也适用于客户端组件, 这是一个好事。

下面是修改后的 `UserForm` 组件 (`user-form.jsx` 文件)。注意表单的action值现在被修改为新的函数 `updatedUserWithId`。

import { Input } from "./ui/input"
import { Button } from "./ui/button"

import { updateUser } from "@/app/actions/user"

const UserForm = ({userId}) => {
  const updatedUserWithId = updateUser.bind(null, userId);

  return(
    <form className="p-4 flex" action={updatedUserWithId}>
      <Input className="w-1/2 mx-2" type="text" name="name" />
      <Button type="submit">Update User Name</Button>
    </form>
  )
}

export default UserForm;

现在, 服务器动作将接收 `userId` 值作为参数。我们也将把它打印到控制台。

"use server"

export async function updateUser(userId, formData) {
  const name = formData.get('name');
  console.log(userId);
  console.log(name);

  // 使用用户 id 和名称做任何事情, 保存到数据库, 
  // 创建发票, 无论什么!
}

如果您提交带有名称值的表单:

您将看到用户 ID 和名称值都被记录在服务器控制台中。太好了! 我们从表单数据中记录了一个值, 另一个值被内部传递到服务器动作。

因此, 我们学习了如何将附加参数传递给服务器动作以及表单数据。

那么, 隐藏字段呢?

HTML은 사용자 입력을 받지 않고 클라이언트 데이터를 서버로 전달하기 위해 숨겨진 타입의 폼 필드를 지원합니다. 따라서 우리는 userId 값을 다음과 같이 숨겨진 필드를 사용하여 전달할 수 있습니다:

그렇다면 왜 bind() 메서드를 사용하여 모든 것을 수행했을까요? 보안 문제 때문입니다. 숨겨진 필드를 사용하여 데이터를 전달할 때 값은 렌더링된 HTML의 일부가 되며 인코딩되지 않습니다. 따라서 프로그래밍 방식으로 처리하는 것이 좋습니다.

자원

여기까지입니다. 이 기사를 읽는 것이 즐거웠고 새로운 것을 배웠나요? 그렇다면 이 콘텐츠가 도움이 되었는지 알고 싶습니다. 필요할 수 있는 몇 가지 추가 자료를 공유하겠습니다:

또한, 다음과 같이 저와 연락 可能하게 해보세요:

  • 제 YouTube 채널에 구독하십시오. 如果您想学习React及其生态系统，比如Next.js，并希望了解基础概念和项目，那么我有一个好消息要告诉您: 您可以在我的YouTube频道的这个播放列表中找到25多个视频教程和15多个小时的引人入胜的内容，完全免费。 希望您也会喜欢它们。

  • X (Twitter)나 LinkedIn에서 저를 팔로우하여 매일 스킬 향상 팁을 놓치지 마세요.

  • GitHub에서 제 오픈 소스 작업을 확인하고 팔로우하세요.

  • 제가 GreenRoots Blog에 regularly meaningful posts를 发布한다. 그들을 마음에 들면 좋겠어요.

次の 글을 만나러 가는 路上에서, 가きます. 그 전에는 가까이에서 조심하시고, 계속해서 배워보세요.