[NextJS] 260404 폼 제출 상태 확인

오늘은 토요일.

차가 고장나서 차 수리를 다녀왔다.

클럭 스프링이 고장이 났네.

- 클럭 스프링은 핸들 안에 들어있는 전기 배선으로 에어백 경고등이 들어와서 수리함

왜 클럭 스프링이냐면, 옛날 시계에 들어있던 태엽과 같은 모습이라 시계 태엽이라는 명칭이였다고 한다.

 

쓸데없는 소리를 좀 해야 글 분량이 나오기도 해서 잡소리를 했다.

 

----------------------------------

이제 본론으로 돌아와서 폼 제출시 상태를 가져올수 있다.

어떻게 가져오는가? 

useFormStatus를 통해서 가져올수 있다.

해당 라이브러리는 react-dom에 들어있다.

 

MealsFormSubmit 버튼을 아래와 같이 만들어주고,

'use client'

import { useFormStatus } from "react-dom";

export default function MealsFormSubmit() {
    const { pending } = useFormStatus();

    if(pending) {
        console.log('pending: ', pending);  
    }
    return <button disabled={pending}>
        {pending ? 'Submitting...' : 'Share Meal'}
        </button>
}

 

 

화면단 폼 내부에 아래와 같이 사용한다.

... 상위 코드 생략 ...

		  <p className={classes.actions}>
            <MealsFormSubmit />
          </p>
        </form>

... 하위 코드 생략 ...

 

뭐 하나씩 정리하다보면 나중엔 외워서 쓸수 있을것 같다.

 

 

두번째로 useFormState를 공부하겠다.

import { useFormState } from 'react-dom';

 

 

  // useFormState

  // 첫번째 인수는 실제 Server Action.

  // 두번째 인수는 컴포넌트 초기값

  // 반환값

  // state: 현재 폼의 상태 응답값 (예: pending, error, success 등)

  // 두번째 인자 : formAction: 폼 제출을 트리거하는 함수. 이 함수는 폼이 제출될 때 호출되며, Server Action과 연결되어 있음.

  const [state, formAction] = useFormState(shareMeal, {message: null});

 

여기서 사용하는 formAction은 실제 액션부이다.

        <form className={classes.form} action={formAction}>

 

 

 

formAction은 useFormState()로 전달받는 실제 폼 상태값이다.

연결고리를 생각하는게 쉽지는 않다. 잘 생각하고 곱씹고 이해하려 해보자.

 

해당 액션은 아래와 같이 호출되어진다.

기존에 사용되던 폼데이터가 두번째 인수로 받아지는것에 주의한다.

export async function shareMeal(prevState, formData) {

 

 

폼데이터 검증 과정을 거치고, 오류 발생시 오류로 던져줄수가 있다.

  if (isInvalidText(meal.title) ||

    isInvalidText(meal.summary) ||

    isInvalidText(meal.instructions) ||

    isInvalidText(meal.creator) ||

    isInvalidText(meal.creator_email) ||

    !meal.creator_email.includes('@') ||

    !meal.image ||

    meal.image.size === 0    

    )

  {

    logger.info('유효하지 않은 입력입니다.');

    return {

      message: '유효하지 않은 입력입니다. 모든 필드를 올바르게 작성해주세요.',

    };

  }

  else {

    logger.info('입력 유효성 검사 통과');

  }

 

여기서 중요한부분은 

{

      message: '유효하지 않은 입력입니다. 모든 필드를 올바르게 작성해주세요.',

    };

이 부분이다.

 

  const [state, formAction] = useFormState(shareMeal, {message: null});

초기에 설정된 값과 동일한 양식으로 맞춰주어야 화면단에서 처리가 가능하다.

 

화면단에서는 return된 값을 통해서 화면에 노출해 줄수 있기 때문이다.

    {state.message && <p>{state.message}</p>}

          <p className={classes.actions}>

            <MealsFormSubmit />

          </p>

 

 

form 전송부에 대한 학습이였다.

 

지금은 NEXTJS, CSS를 학습중인데, 어느정도 완성되면 공개 예정이다.