[NextJS 영문 기술 블로그 만들기] server action 사용해보기 (react canary)
로그인을 구현할 차례다.
그동안은 form 처리를 할 때 주로 react-hook-form을 사용해서 관리했다.
실시간 유효성 검사, default values 관리 등등 다양한 form 관리 기능을 제공해주기 때문에 내가 사랑하는 라이브러리이다.
그런데 이번에는 next에서 react canary 기능인 server action을 실험삼아 써보기로 했다.
이유는
1) form을 간소하게 구현할 예정이기에 적합 (실시간 유효성 검사 등 구현하지 않을 예정)
2) 굳이 서버 컴포넌트를 클라이언트 컴포넌트로 바꾸고 싶지 않음
3) 라이브러리 설치로 생기는 번들 사이즈 증가 방지
4) canary이긴 하지만 내 블로그인데 뭐 어때? canary라 좀 덜 안정적인 기능이더라도 학습을 위해 과감히 사용해보기로 함.
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
next docs를 보고 먼저 접했지만, 사실 근-본은 react canary 기능이다.
https://react.dev/reference/react-dom/components/form#handle-form-submission-with-a-server-action
const AuthPage = () => {
const handleLogin = async (formData: FormData) => {
'use server';
const authInfo = {
email: formData.get('email'),
password: formData.get('password'),
};
console.log(authInfo);
};
return (
<form action={handleLogin}>
<div className="my-8">
<Input type="email" name="email" required label="email" />
<Input type="password" name="password" required label="password" />
</div>
<Button text="login" />
</form>
);
};
export default AuthPage;AuthPage는 서버 컴포넌트이다.
원래 알고있던대로 handleSubmit을 onSubmit에 바인딩하려면, 이벤트 핸들러와의 상호작용이므로 AuthPage를 클라이언트 컴포넌트로 변경해야 한다.
하지만! 굳이 클라이언트 컴포넌트로 변경하지 않고 서버 컴포넌트에서도 form 제출을 할 수 있다면 믿으시겠습니까? server action을 쓰면 가능하다.
action prop에 form 제출 후 실행될 함수를 넘겨주는데, 주의할 점은 다음과 같다.
- 반드시 비동기 함수여야 한다.
- 인자로 받는 formData의 type은 global.d.ts에 선언된 내장 타입이므로, 별도로 선언하지 않아도 된다.
- 클라이언트 컴포넌트에서도 사용가능하지만, 서버 컴포넌트 내에서 사용하려면 함수 선두에 'use server'를 선언해줘야 한다.
그리고 인자로 받는 formData는 자바스크립트 FormData 생성자 함수의 인스턴스이다.
https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods
코드의 input을 자세히 보면 name 속성에 각각 email과 password를 지정해주었다. handleLogin 함수 내부에서 email과 password라는 이름을 get 메서드에 인자로 전달하여 form으로 제출한 각각의 value에 접근할 수 있다.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/get
form을 제출하고 console에 출력하면 아래와 같이 나온다.
이 밖에도 useFormStatus나 useFormState 등 form 관련 hooks도 canary 기능에 있다. 이전 버전(v18)까지와 달리 canary에서는 form 제출과 관련된 기능 개발에 많은 자원을 쏟고 있는 듯하다. 복잡한 기능들이 필요한 케이스에서는 react-hook-form을 대체하기 어렵겠지만, 나의 로그인 예시처럼 서버 컴포넌트에서 간략한 form 제출이 필요할 때는 server action을 쓰는 것도 나쁘지 않은 것 같다. 다만 canary 기능이니 안정성이 떨어질 수 있으므로 안정화될 때까지는 production 모드에서는 자제하는 것이 좋을 듯..!
