EcoDev's Blog

NextJs14 use server

1. use server?

불편하게 api route을 제작하고 그곳으로 요청을 날릴 필요없이 “use server”라는 코드만 최상단에 작성해주면 아래 실행되는 함수내용을 서버api로 제작해준다.

따라서 이 코드들은 사용자에게 노출되지 않고 서버에서만 돌아가기 때문에 db동작들을 여기서 처리해주어도 상관없을 것이다.

2. form내용 가져오기

react에서 제공해주는 hook인 useFormState를 사용하면 된다.

긴말하지 않고 바로 예시코드로 알아보자.

TypeScript

const [state, action] = useFormState(handleForm, null);

<form action={action}>
	<FormInput
          name="email"
          type="email"
          required
          placeholder="Email"
          errors={[]}
        />
 </form>

useFormstate를 하나씩 살펴보자.

action : form이 제출되었을 때 useFormState의 첫번째 인자함수를 실행시켜준다.

state : 현재 기본값 null로 설정되어 있음. handleForm에서 값을 return받게 되면 변경됨.

handleForm : 1번동작을 할 때 실행되는 함수.

⇒ 3번 함수를 아래코드에서 알아보자.

TypeScript

"use server";

export async function handleForm(prevState: any, formData: FormData) {
  console.log(formData);
  return {
    error: ["wrong password", "password is too short"],
  };
}

// 출력결과
FormData {
  [Symbol(state)]: [
    { name: 'email', value: 'tnqkr3494@naver.com' },
    { name: 'password', value: '123123' }
  ]
}

“use server”를 이용해서 서버에서 실행되는 코드로 작성한다.

prevState : 함수 실행되기 전에 이미 저장되있던 useFormState의 state값

formData : 폼이 제출될 때 받아오는 정보들

⇒ 중요 : 정보들을 받아올 때 무조건 input태그안에 name을 설정해주어야 함. 그 name을 토대로formData를 만들게 된다.

⇒ 각각의 이름에 맞는 데이터들은 formData.get(설정한 name)으로 가져올 수 있다.

3. use client안에 use server?

use client컴포넌트 안에 다이렉트로 use server를 사용한 함수를 작성하면 오류가 발생한다.

따라서 이런 경우 위에 코드처럼 use server를 사용하는 함수를 컴포넌트화 해서 use client동작하는 코드에 붙여넣으면 된다.

NextJs14 use server

1. use server?

따라서 이 코드들은 사용자에게 노출되지 않고 서버에서만 돌아가기 때문에 db동작들을 여기서 처리해주어도 상관없을 것이다.

2. form내용 가져오기

react에서 제공해주는 hook인 useFormState를 사용하면 된다.

긴말하지 않고 바로 예시코드로 알아보자.

TypeScript

const [state, action] = useFormState(handleForm, null);

<form action={action}>
	<FormInput
          name="email"
          type="email"
          required
          placeholder="Email"
          errors={[]}
        />
 </form>

useFormstate를 하나씩 살펴보자.

action : form이 제출되었을 때 useFormState의 첫번째 인자함수를 실행시켜준다.

state : 현재 기본값 null로 설정되어 있음. handleForm에서 값을 return받게 되면 변경됨.

handleForm : 1번동작을 할 때 실행되는 함수.

⇒ 3번 함수를 아래코드에서 알아보자.

TypeScript

"use server";

export async function handleForm(prevState: any, formData: FormData) {
  console.log(formData);
  return {
    error: ["wrong password", "password is too short"],
  };
}

// 출력결과
FormData {
  [Symbol(state)]: [
    { name: 'email', value: 'tnqkr3494@naver.com' },
    { name: 'password', value: '123123' }
  ]
}

“use server”를 이용해서 서버에서 실행되는 코드로 작성한다.

prevState : 함수 실행되기 전에 이미 저장되있던 useFormState의 state값

formData : 폼이 제출될 때 받아오는 정보들

⇒ 중요 : 정보들을 받아올 때 무조건 input태그안에 name을 설정해주어야 함. 그 name을 토대로formData를 만들게 된다.

⇒ 각각의 이름에 맞는 데이터들은 formData.get(설정한 name)으로 가져올 수 있다.

3. use client안에 use server?

use client컴포넌트 안에 다이렉트로 use server를 사용한 함수를 작성하면 오류가 발생한다.

따라서 이런 경우 위에 코드처럼 use server를 사용하는 함수를 컴포넌트화 해서 use client동작하는 코드에 붙여넣으면 된다.