React 서버 기능 치트 시트

React Server 기능 기본 사항

• 서버 컴포넌트(React Server Component, RSC): 서버에서 실행되며 SSR과 동일하게 클라이언트에 렌더링하는 컴포넌트입니다.
• 서버 기능(a.k.a. Server Actions): 서버에서만 실행되어 클라이언트에게 정보를 보내는 기능입니다.

지시어

• '클라이언트 사용': "서버 구성 요소"가 활성화된 환경을 사용하는 경우 파일 상단에 클라이언트 사용을 표시하여 클라이언트 구성 요소로 표시해야 합니다.
• '서버 사용': 서버에 있는 정보를 변경하는 것을 고려한다면, 서버 컴포넌트나 파일에서 함수 본문 상단에 서버 지시문을 사용하여 서버에서만 동작하도록 표시해야 합니다.

서버 구성 요소

• RSC는 상태 저장이나 수명 주기가 없습니다. 서버 컴포넌트에서는 Hook 기능(useState, useEffect 등)을 사용할 수 없습니다.
• RSC는 비동기 기능을 가질 수 있습니다.
• RSC는 서버 기능을 가질 수 있습니다. 단, 함수 본문 상단에 '서버 사용'을 표시해야 합니다.
• RSC는 서버 구성 요소와 클라이언트 구성 요소 모두에서 하위 항목을 가질 수 있습니다.
• RSC는 브라우저 API를 실행할 수 없습니다.
• RSC는 모든 유형의 prop을 RSC에 전달할 수 있습니다. 클라이언트 구성 요소에 제한적으로 소품 유형을 전달할 수도 있습니다. 아래 지시어 유형 표를 확인하세요.

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

서버 기능

• 정의 시 함수 본문이나 파일에 'use server' 지시문이 있어야 합니다.
• 함수 본문에서 모든 서버 기능을 실행할 수 있습니다.
• 함수 본문에서는 브라우저 API를 실행할 수 없습니다.
• 서버와 클라이언트 모두에서 서버 기능을 호출할 수 있습니다.
• 제한적으로 값을 반환할 수 있습니다. 아래 지시문 유형 표를 확인하세요.

서버 컴포넌트에서 서버 기능 선언

import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';

    await db.notes.create();
  }

  return <button onclick="{createNoteAction}/">;
}
</button>

별도의 파일에 서버 기능 선언

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

클라이언트 컴포넌트의 서버 기능 사용

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

지시어의 핸들 값 유형 비교

• 클라이언트 사용: 서버 구성 요소에서 클라이언트 구성 요소로 prop 유형을 전달합니다.
• 서버 사용: 서버 함수의 반환 유형

Type	use client	use server	Notes
string	✅	✅	both string value and iterables are supported.
number	✅	✅
bigint	✅	✅
boolean	✅	✅
undefined	✅	✅
null	✅	✅
Array	✅	✅	Only available in the item of serializable list.
Map	✅	✅	Only available in the item of serializable list.
Set	✅	✅	Only available in the item of serializable list.
TypedArray	✅	✅
ArrayBuffer	✅	✅
Date	✅	✅
object	✅	✅	Support only plain object(object initializers or JSON), null prototype not supported.
Promises	✅	✅	Only available in the serializable list.
ReactNode	✅	❌	Only Server Component can send it to Client Component via props.
FormData	❌	✅	Only server functions can return FormData instance.
symbol	⚠️	⚠️	Only symbols registered in the global Symbol registry via Symbol.for
function	⚠️	⚠️	Only server functions allowed.
class	❌	❌	Any instance objects are not serializable.

• 다른 유형과 인스턴스는 사용할 수 없습니다.

즐거운 리액션!

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