[NextJS] 20260419 Form action에 대한 조금 더 깊은 이해

NextJS를 공부하다 보면 이해가 안가는 부분이 몇군데 생긴다. 

일단은 이런게 있구나 하고 넘어갔고, 이제는 중간정도의 이해가 필요한 상황이다.

곧 NextJS는 마무리를 하고 다음 학습인 CSS를 진행해야 하기 때문이다.

 

어찌되었던.. 정리를 해보자

 

서버액션을 통해서 작업을 하기 위해서는 actions/ 폴더를 생성하고, actions.js파일을 만드는것으로 시작한다.

'use server';

export async function signup(formData) {
    const email = formData.get('email');
    const password = formData.get('password');

    let errors = {};

    if (!email.includes('@')) {
        errors.email = '유효한 올바른 이메일 주소를 알려주세요.';
    }

    if (password.trim().length < 8) {
        errors.password = '비밀번호는 8자 이상이어야 합니다.';
    }

    return { errors };
}

 

로그인 처리를 위한 코드이다.

지금은 form으로부터 전달된 정보중에 유효성 체크를 하는 항목이 들어있다.

formData를 통해 데이터를 전달받고 유효한지 확인을하여 errors를 리턴한다.

 

실제 화면을 보자

export default function AuthForm() {
  const [formState, formAction] = useFormState(signup, {});

  // function formAction() {

  // }

  return (
    <form id="auth-form" action={formAction} >
      ... 중략 ...
      {formState.errors && (
        <ul id="form-errors">
          {Object.keys(formState.errors).map((error) => (
              <li key={error}>{formState.errors[error]}</li>
          ))}
        </ul>
      )}
      <p>
        <button type="submit">
          Create Account
        </button>
      </p>
      ... 중략 ...
    </form>
  );
}

 

    <form id="auth-form" action={formAction} >

실제 코드에서는 form에서 action으로 formAction을 넣어두었다.

 

  const [formState, formAction] = useFormState(signup, {});

 

useFormState 함수를 사용하여 signup을 처리할거고, 초기상태값은 빈객체를 전달할거다.

formAction이 발생하면 signup server action이 동작하고, 여기서 반환된 errors 결과값이 formState에 담기게 될것이다.

 

이와 같은 이유로 formState 값을 가지고 화면에서 오류 처리가 가능해진다.

{formState.errors && (
        <ul id="form-errors">
          {Object.keys(formState.errors).map((error) => (
              <li key={error}>{formState.errors[error]}</li>
          ))}
        </ul>
      )}

 이부분이 오류 결과를 가지고 오류처리를 하는 부분이다.

 

정리가 되지 않았던 부분이 정리가 되어 가는가?

나는 좀 정리가 되는것 같다.

 

이제 여기서 변경이 되어야 할 부분이 생긴다.

export async function signup(prevState, formData) {
    const email = formData.get('email');
    const password = formData.get('password');

    let errors = {};

    if (!email.includes('@')) {
        errors.email = '유효한 올바른 이메일 주소를 알려주세요.';
    }

    if (password.trim().length < 8) {
        errors.password = '비밀번호는 8자 이상이어야 합니다.';
    }

    if (Object.keys(errors).length > 0) {
        return {
            errors
        }
    }

    // 사용자 정보를 처리한다.
}

 

뭐가 달라진지 느껴지는가?

export async function signup(prevState, formData) {

 

prevState 상태가 추가되었다.

이건 갑자기 왜 추가되었냐고?

useFormState(signup, {});

 

useFormState()를 사용했기 때문에 signup함수 인자에 변경이 필요해진다.

결국 함수는 큰 변화는 없고, 인자에 대한 변경이 발생한거다.

물론, errors가 발생한다면 기존과 동일한 처리가 필요할것이고

errors가 없다면 signup에 관련된 처리를 진행하면된다.

 

이정도면 깔끔하게 작성된 글이 되어 가는것 같다.

 

NextJS에 대한 이해도가 조금은 향상된것 같다.

계속 학습을 해서 4월 말에는 다음 스텝으로 넘어가야겠다.

 

1463일이 남았다...