2024-07-16🧐 TIL - Server Action

오늘은 노마드코더 캐럿마켓 #5 [🔥 2024 UPDATE 🔥] SERVER ACTIONS 를 들었다

Route Handlers

• requese를 받을 때 interface 종류가 Request와 NextRequest가 있어서 무엇을 사용해야 하는지 헷갈렸던 경험이 있는데, NextRequest가 더 다양한 정보를 제공해 준다고 한다. (cookie, ip, nexturl..)                          

GET Request

export async function GET(request: Request) {
  console.log(request);
  return Response.json({
    ok: true,
  });
}

 

POST Request

export async function POST(request: NextRequest) {
  const data = await request.json();
  return Response.json(data);
}

 

원래라면 이렇게 했다면 이제 server action 이 생겼다.

 

Server Action

이전과 같이 새로운 파일을 만들어서 서버로 처리할 필요가 없는 것이다.

use server를 사용해 같은 파일에서 처리 가능하다.

// Server Component
export default function Page() {
  // Server Action
  async function create() {
    'use server'
 
    // ...
  }
 
  return (
    // ...
  )
}

출처 : https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

이런 식으로 Server action을 처리 할 수 있다. 

대신 form의 name이 중요해 진다. 그 name으로 데이터가 들어오기 때문이다. 

 

와우... 너무 편리하군 저번에 프로젝트할 때는 제대로 공부하지 않고 원래 하던 데로 다 route handler로 했는데...

 

useFormStatus

react hook으로 form의 자식요소에 사용해야한다. 

form의 status를 알 수 있는 Hook인데, 니코쌤은 pending 정보를 가져오려고 사용하셨다. 

parent form의 상태를 가져올 수 있다.

https://react.dev/reference/react-dom/hooks/useFormStatus

const { pending, data, method, action } = useFormStatus();

 

useActionState

useFormState 이름이 바뀌었다. 

form action의 결과에 따라 state를 변경 할 수 있다. 

공식 홈페이지 예시다.

import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}

출처 : https://pl.react.dev/reference/react/useActionState

useActionState – React