[Next.js] Client Component에서 Server Action 사용하기

Client Component에서 Server Action 사용하기

• Server Component 처럼 그대로 쓰되 server action 부분을 별도의 ts파일로 분리해 작성하고, client component 내에서 import해 사용하면 됨

/_lib/signup.ts 

"use server" // 상단에 use server를 쓰면 자동으로 Server Action이 됨

const submit = async(formData: FormData) => {

"use server" // 서버 코드를 작성하기 위해서 반드시 명시해줘야 함, 

//브라우저에 노출이 안되기 때문에, 키값이나 비밀값 써도 문제 없음
//브라우저 -> 서버 -> DB가 아닌 서버 -> DB 로 바로간다 생각하면 됨

//formData.get('이름') 으로 값들을 가져 올 수 있음. name이랑 일치해야함!

// message는 client component에서 읽어올 수 있음
if(!formData.get('id')){
	return { message : 'no_id'};
}
if(!formData.get('name')){
	return { message : 'no_name'};
}
if(!formData.get('password')){
	return { message : 'no_password'};
}
if(!formData.get('image')){
	return { message : 'no_image'};
}

//NEXT_PUBLIC_BASE_URL = http://localhost:9090 (node 서버 주소)
const response = await fetch(`${NEXT_PUBLIC_BASE_URL}/api/users`, {
	method: 'post',
	body : formData,
	credentials: 'include',
})
console.log(response.status);
if(response.status === 403)
{
	return {message: 'user_exists'}
}
console.log(await response.json())
redirect('home')

//client component

import onSubmit from '/_lib/signup'

const submit = onSubmit;

//client component에선 message를 읽어올 수 있음
import {useFormState, useFormStatus} from 'react-dom';

const [state,formAction] = useFormState(onSubmit, {message: null});
// useFormState에 ServerAction함수를 넣어주기 state를 관리해주는 함수가 됨
// 2번째 매개변수는 초기값임, 처리결과에 따라 message가 달라질 것임

// pending <- 처리중

const {pending} = useFormStatus();

useFormState를 쓰게 되면 action을 formAction을 넣어주면 됨

// 관리하게 될 매개변수가 2개가 됐음으로 server action부분 매개변수도 2개로 변경

const submit = async(prevState: {message : string | null}, formData: FormData) => {

// 그래서 message 어떻게 읽어오는가?
<div>{state?.message}</div>