[TIL] API route, Server Action, useFormStatus

오늘 공부한것 & 기억할 내용

API route

• NextJs에서 로그인등 API에 CRUD를 보내야할경우 사용한다
• route.ts 파일은 HTTP요청을 받아 Json으로 반환해주거나, 사용자를 다른곳으로 이동시킨다. (UI렌더X)

// 폴더 구조 : app/www/users/route.ts
export async function GET(request:NextRequest){
	return Response.json({
    	ok:true
    })
}
export async function POST(request:NextRequest){
	const data = await request.json()
    return Request.json(data)
}

//사용방법
const onClick = async () => {
	const res = await fetch("/www/users",{
    	method:"POST",
      	body:JSON.stringify({
        	useName:"",
          	password:""
        })
    })
    console.log(await res.json())
}

Server Action

• API route를 만들지 않고 server component에서 사용
• input의 경우 name이 필수로 들어가야 payload에서 보내지는 데이터를 볼 수 있다.

const onSubmit = async (data:FormData) => {
	"use server" // 함수가 서버에서만 실행되도록 해준다.
  console.log(data.get("email"),data.get("password")) // POST함수를 만들면서 GET의 기능도 같이 사용할 수 있다.
}
<form action={onSubmit}>

useFormStatus

• server Action의 상태에 따라 사용하는 hook
• form 의 자식요소 component안에서 사용해야한다.
• pending, data, method, action이 있다.

const {pending} = useFormStatus() //pending은 로딩중인지
//form의 상태에 따라 변경하고자 하는 component내부에서 사용해야한다.
//form의 자식요소에서만 사용되어야한다

useActionState

• form action의 결과를 기반으로 state를 변경할 수 있게 도와주는 hook
• hook이기에 "use client"를 사용해야해서 server action과 파일을 분리시킨다 (server action은 action.ts로 이동)

//state는 초기값, action은 상태를 업데이트할때 사용할 함수(useState와 비슷)
//useActionState의 첫번째는 사용할 action함수를 넣어주고 두번째는 초기값을 정의해준다.
const [state, action] = useActionState(onSubmit,null)

배운점 & 느낀점

API로 통신하는 방법에 대해 배웠는데 기존에 하던 방법도 어려운거 같은데 server action도 처음 접해봐서 간단하지는 않은 느낌? 여러번 코드를 사용해봐야 알 수 있을거 같다. 지금은 개념만 익히는거에 집중해야겠다