NEXT JS 14 공부 중 Server Action이라는걸 접해버렸다...
일단 첫인상은 완전 대박...
보통 회원가입 기능을 구현할때 user로부터 username, password, email 등등의 정보를 받고 뒷단으로 post request를 날린다.
next js에서는 api route를 통해서 이를 핸들링할 수 있다.
예를 들어서 위와같이 Email과 Password로 Login하는 Form이 있다고 가정해보자.
이럴 경우에는 일반적으로는 POST Request를 통해서 서버에게 데이터를 넘겨주고, 서버에서는 해당 데이터를 받고 정상적인 유저라면 필요한 정보를 넘겨줄거다.
그래서 Next JS API Route를 사용하면,
1. Login 버튼을 눌렀을때 POST Request를 날리는 기능
2. API Route POST Response 기능
위 2가지를 구현해야한다.
// POST Request onClick function
const onClick = async () => {
const respose = await fetch("/api/users", {
method: "POST",
body: JSON.stringify({
username: "hyeon",
password: "1234",
}),
});
console.log(await respose.json());
};
// api/users/route.ts
export async function POST(request: NextRequest) {
const data = await request.json();
return Response.json(data);
}
무지하게 귀찮은 일인데, NEXT JS 14 Server Action을 사용하면 이 귀찮은 일을 아주 간단하게 대체할 수 있다!
Server Action은 어떻게 사용하나?!
무지하게 간단하다, api route에서 login button이 눌릴때 fetch post request하는 함수를 대체할 server action function을 만들어 주면 된다!
async function onSubmit(data: FormData) {
"use server";
console.log("run in the server");
console.log(data.get("email"));
console.log(data.get("password"));
}이 과정에서 꼭 챙겨야하는 중요한 내용은 아래와 같다.
1."use server" keyword는 server action 함수 최상단에 작성한다. (위 예시 코드처럼)
2. server action 함수는 button의 onClick 이벤트가 아닌, form의 action 이벤트에 할당한다.
<form action={onSubmit} className="flex flex-col gap-3 ">- form에서 사용하는 input 엘리먼트는 모두 name을 넣어줘야한다.
<input type="email" name="email" placeholder="Email" />1번은 "use client"처럼 해당 함수가 서버에서 동작하는 함수다 라는걸 명시해주는 부분이라고 생각하면 될거같다.
2번의 경우는 아직 더 찾아봐야겠지만, onSubmit이 아닌 action에 구현해둔 server action 함수를 할당해야한다.
그나마 다행인건 action에 server action 함수라 외우기는 편한듯 하다?
3번의 경우는 input tag에 name값을 넣어줘야한다.
사실 input tag가 name이라는걸 갖고있는지 처음알았는데, server action함수 내부에서 form으로부터 받은 값을 구분하고 사용하기 위해서는 name을 넣어줘야 한다.
위와같이 코드를 작성해서 Login 버튼을 눌르면, next js가 알아서 Post request를 나 대신 날려준다!!!
이렇게 server action함수에서 form으로 부터 올라온 값을 잘 갖고올 수 있다.
이거 무지 편한듯??
근데 외부 api를 이용해야 하거나, 이전에 구현해둔걸 사용해야 한다면 api route를 사용해야 하는점은 여전하기에 둘 다 사용법을 알아둬야 한다고 생각이 든다.
