1. inline Server Action

함수를 만들고 "use server";"를 최상단에 적어주면 된다.

form 의 action 속성에 즉시 추가해서 사용할 수 있다.

<form action={action} ... >

action의 진행 상황을 UI에 알려줘야 한다.

사용자가 계속 버튼을 클릭 할 수 없도록 비활성화 시키기

⇒ useFormStatus hook

• 자신의 부모 components를 보고, 가장 가까운 form을 찾는다.
• form의 자식 요소 안에서 사용해야 한다.
• 그리고 부모form의 상태를 알려준다.
• “use client”;

export default function FormButton( {text}: FormButtonProps ) {
	const { pending } = **useFormStatus**(); // 컴포넌트 안에서 아용
	//....
}

2. action

• action의 결과를 알기 위해, useFormState 라는hook 사용
• action을 인자로 받아서, action의 두번째 배열인 트리거를 리턴
• “use client”;
• “use client”와 “use server”; 가 겹친다면, “use server” 쓰는 컴포넌트를 따로 분리

const [state, action] = useFormState(handleForm, null); // null = 초기값
// handleForm의 결과값이 state에 담기고,
// 두번째 action에서 실행

3. use server;

action이 이전에 반환했던 값이 prevState로 들어감