[TIL] Next.js - Server Actions, useFormStatus, useFormState, useActionState

오늘 공부한것 & 기억하고 싶은 내용

Server Actions

Next.js는 POST 요청 처리를 더 간단하게 만들어주는 Server Actions를 제공한다.
Next.js 13 이상 버전에서 사용 가능 하다.

기존 방식 vs Server Actions

이전에는 POST 요청을 처리하기 위해 route handler를 만들어야 했지만,
이제 "use server" 키워드 하나만으로 모든 처리를 서버에서 실행할 수 있다!

기존 방식 코드 예제

//POST 요청 처리
export async function POST(request: NextRequest) {
  const data = await request.json(); // 클라이언트에서 보낸 JSON 데이터를 파싱
  console.log("log the user in!!!"); // 서버에서 로깅
  return Response.json(data); // 클라이언트에 데이터를 JSON으로 반환
}

Server Actions 코드 예제

async function handleForm(formData: FormData) {
  "use server";
  console.log(formData.get("email"), formData.get("password"));
  console.log("i run in the server baby!");
}

간단한 사용법

• input에 name 속성을 추가하고, form에 action을 설정하면 된다.
• 데이터를 state에 저장하거나, onChange 이벤트 핸들러, fetch요청을 추가할 필요가 없다.
• 모든 처리가 서버에서 자동으로 이루어진다.

Server Actions의 장점

• 코드 간소화: 추가적인 라우트 파일 없이 서버에서 바로 데이터 처리 가능
• 서버 로직 분리: 클라이언트에서 비즈니스 로직이 분리되어 유지보수 용이

주의
server action은 서버에서만 실행되므로 클라이언트에서 실시간 데이터 처리가 필요한 경우엔 기존 방식(fetch)을 사용해야한다.

useFormStatus

• ReactJS가 제공하는 form action의 작업 상태를 알려주는 hook
• 마지막 form submit의 상태 정보를 제공하는 Hook
• action(어떤 action이었는지 알려줌), data(전송된 데이터를 알려줌), method, pending(pending 상태인지를 알려주는건데, function이 끝난 여부를 알려줌)이 있다.
• 이 hook은 action을 실행하는 form과 같은 곳에서 사용할 수 없다.
• 이 hook은 form의 자식에서만 사용할 수 있다.
• form의 상태에 따라 변경하고자 하는 component 내부에서 사용해야 함

const { pending } = useFormStatus();

'use client'

function Button() {
  // form 내부 컴포넌트에서 useFormStatus를 호출하기
  const { pending } = useFormStatus(); //form이 pending 상태라면 비활성화 됨
  return < button disabled={pending} >...< /button >;
}

useFormState

• form action의 결과를 기반으로 state를 변경할 수 있게 도와주는 hook
• 사용자에게 뭔가 잘못됐다는걸 보여주고 싶을때 사용
• interactive ui일땐 use client 위에 적어줘야함
• hook이기에 "use client"를 사용해야해서 server action과 파일을 분리시킨다 (server action은 action.ts로 이동
• 컴포넌트 최상위 레벨에서 useFormState를 호출하여 폼 액션이 실행될 때 업데이트되는 컴포넌트 state를 생성

useActionState

• useActionState는 Next.js에서 폼 액션(Form Action)의 상태를 추적하고 관리하기 위해 사용하는 React Hook이다.

• 이를 통해 폼 액션의 성공 또는 실패 상태를 기반으로 UI를 동적으로 업데이트할 수 있다.

• 이 Hook은 서버 액션(Server Actions)과 함께 사용되어 사용자의 입력에 대해 실시간으로 피드백을 제공하거나, 폼 전송 후 추가 작업을 수행할 수 있게 도와준다.

액션 상태 관리

폼 액션의 진행 상태(pending), 결과(result), 에러(error) 등의 정보를 관리합니다.

사용자 피드백 제공

폼 제출이 성공적이었는지 또는 실패했는지에 따라 UI를 업데이트하거나 메시지를 표시할 수 있습니다.

클라이언트에서 사용

use client로 선언된 컴포넌트에서만 사용 가능합니다.

Server Actions와 분리

서버 액션은 서버에서 실행되지만, 이 Hook은 클라이언트에서 폼 상태를 추적합니다.

useActionState vs useFormState

특징	useActionState	useFormState
역할	폼 액션(Form Action)의 상태를 추적하고 관리.	폼 액션 결과를 기반으로 React 컴포넌트의 상태를 업데이트.
주요 기능	- 폼 액션의 상태 정보 (pending, error, result)를 반환. - 액션 실행 여부, 성공/실패 여부 등을 알림.	폼 제출 이후 상태(state)를 업데이트하여 UI를 동적으로 변경.
상태 관리 위치	Hook 내부에서 상태를 직접 관리 (pending, result, error를 포함).	개발자가 컴포넌트에서 필요한 상태를 직접 정의하고 업데이트. 상태 관리는 개발자가 구현.
리턴값	pending, error, result, action, method 등 액션과 관련된 상태 정보.	별도의 리턴 값 없음. 대신 상태 업데이트를 위해 컴포넌트에서 로직을 작성해야 함.
사용 목적	폼 제출 상태(로딩, 성공, 실패)를 추적하고 UI를 업데이트.	폼 액션 결과를 바탕으로 사용자 정의 상태를 동적으로 변경.
적용 위치	폼이 포함된 컴포넌트의 자식 요소에서 사용 가능.	컴포넌트 최상위 레벨에서 사용하여 사용자 정의 상태를 초기화하거나 업데이트.
의존성	Next.js가 내부적으로 관리하는 상태를 Hook으로 노출.	개발자가 상태를 직접 관리해야 함.
예제	pending 상태로 로딩 UI 표시. error로 에러 메시지 출력. result로 성공 메시지 표시.	사용자 정의 상태를 활용해 동적으로 컴포넌트 UI를 변경 (예: 성공 메시지 표시, 특정 필드 강조 등).
장점	- 상태 관리 자동화. - 간단한 상태 추적 및 UI 업데이트 가능.	- 완전히 커스텀화된 상태 관리 가능. - 폼 액션 결과를 이용해 복잡한 UI 업데이트 구현 가능.
사용 제약	use client가 필요 없지만, 폼의 자식 컴포넌트에서만 사용 가능.	use client가 필요하며, 서버 액션과 분리된 상태 관리가 필요.

배운점 & 느낀점

아직 초보라 .... 너무 어렵다.. 예제 하나 이해하기도 어려운 지경에 이르렀지만... 열심히 개념을 익혀서 로그인 페이지를 만들어봐야겠다.!!!