React-Hook-Form , Yup 사용하기

• React-Hook-Form 은 form 형식을 편하게 사용할 수 있는 라이브러리
• Yup은 Validation체크를 편하게 적용하기위한 라이브러리

• 원래는 폼을 만들기 위해서 onChange 함수를 통해서 event.target.value 로 값을 받았다.
  또한 버튼에 onClick함수를 직접 달아서 적용시켜 주었다.
  그리고 에러메시지(ex : 글자수 3~10자수제한 , 비밀번호는 숫자만 입력가능 등)를
  띄우기 위해 일일히 함수를 만들어줘야 했다.

• 하지만 React-Hook-Form과 Yup을 사용한다면
  더 간단하고 편하게 form 형식을 만들어 줄 수 있다.

React-Hook-Form , Yup 실전적용

📔 결과물

💻 market-write.validation.ts

• 먼저 yup 을 사용한 validation을 따로 페이지를 만들어준다

• 각 넣어줄 값마다 검증조건을 작성해주고 에러메시지도 작성해준다.

import * as yup from "yup"; // *을 사용하면 전체기능을 import해온다
export const schema = yup.object().shape({
  name: yup
    .string()
    .min(1, "상품명은 최소 1자 이상입니다.")
    .max(15, "상품명은 최대 20자 까지입니다.")
    .required("상품명을 반드시 입력해주세요!"),
  remarks: yup
    .string()
    .min(5, "한줄요약은 최소 5자 이상입니다.")
    .max(20, "한줄요약은 최대 20자 까지입니다.")
    .required("한줄요약을 반드시 입력해주세요!"),
  contents: yup
    .string()
    .min(5, "상품설명은 최소 5자 이상입니다.")
    .max(500, "상품설명은 최대 500자 까지입니다.")
    .required("상품설명을 반드시 입력해주세요!"),
  price: yup
    .number()
    .typeError("판매가격은 숫자를 입력해주세요.")
    .positive("판매가격은 0보다 큽니다.")
    .required("판매가격을 반드시 입력해주세요!"),
  tags: yup.string(),
});

💻 market-write.container.tsx

• 위에서 작성해준 schema를 import 해오고 useForm의 resolver에 넣어준다.

...
import { schema } from "./market-write.validation";
export default function MarketWrite() {
  const router = useRouter();
  const { handleSubmit, register, formState } = useForm({
    mode: "onChange",
    resolver: yupResolver(schema),
  });
...

• Presenter의 form 안에서 적힌 data가 그대로 mutation으로 작성되게끔 onClick함수를 만들어준다. 확실히 이전의 코드보다 짧아지고 간편해졌다.

• useForm의 handleSubmit / register / formState 은Presenter 페이지에서 사용하기 때문에 return 안에 넘겨준다.

...
  async function onClickUploadProduct(data) {
    try {
      const result = await createUseditem({
        variables: {
          createUseditemInput: { ...data },
        },
      });
      console.log(data);
      alert("상품을 등록합니다~");
      router.push(`/market/market-detail/${result.data.createUseditem._id}`);
    } catch (error) {
      console.log(error.message);
    }
  }
  return (
    <MarketWriteUI
      handleSubmit={handleSubmit}
      register={register}
      formState={formState}
      onClickMoveToMarketList={onClickMoveToMarketList}
      onClickUploadProduct={onClickUploadProduct}
    />
  );
}

💻 market-write.container.tsx

• React-Hook-Form을 사용하기 위해서는 꼭 전체를 form으로 감싸주어야 한다.
• 예전 onClick함수를 버튼에 직접 넣어주었지만 handleSubmit을 사용해서 form에 넣어준다면 타입이 submit인 버튼을 자동으로 인식해서 적용된다.
• register를 이용해 해당값이 무슨값인지 적용해준다.

export default function MarketWriteUI(props) {
  return (
        <form onSubmit={props.handleSubmit(props.onClickUploadProduct)}  >
          ...
          <InputText type="text" {...props.register("name")} />
          ...
          <InputText type="text" {...props.register("remarks")} />
          ...
          <DetailText {...props.register("contents")} />
          ...
          <InputText type="text" {...props.register("price")} />
          ...
          <InputText type="text" {...props.register("tags")} />
          ...
     	  <CommonButton type="submit" name="등록하기" />
      	  ...
        </form>
   );
}