코드캠프 팀프로젝트 2주차 - react hook from과 유효성검사, 훅폼을 쓸 지도 모르니까 복습하자

2주차의 시작

다른 팀원들은 퍼블리싱이 거의 다 끝나가고 , api 도 하나씩 속속 도착하고 있지만
나의 파트 (예약, 마이페이지)는 기본 CRUD 다음이기 때문에, 하드 코딩 데이터만 넣어놓고 조금 기다려야 한다.
예약 페이지 디자인이 마음에 들지 않아 다시 갈아 엎기 시작하고,
예약 폼에 대한 사전 준비를 하고 있다.

백엔드에서 어떤 데이터를 필요로 할 지를 계속 생각해보고, 어떻게 보내줄까 + css로 그릴까 를 생각하게 되는 것 같다.
내가 보내려고 하는 데이터 내용 및 그 순서와 사용자가 그것을 선택하는 방법 등등 여러가지를 고려해서 예약 폼 디자인을 해야 한다고 생각하기 때문에...
기획자와 디자이너가 이 부분을 담당하지 않아 예약 폼 및 예약 완료 페이지의 디자인은 오직 나의 몫....

아무래도 예약 폼이니까, hook form을 쓰지 않을까? 싶어서, 미리미리 Mui 의 컴포넌트를 react hook form 과 함께 쓰는 방법을 연구해보고 있다. Mui는 사람들이 많이 쓰는 라이브러리 인듯 하다. 자료가 굉장히 많다!

react hook form 복습하기

input(radio, text, date, time 등), select 에서 같은 방식으로 유효성 검사를 할 수 있었다.
input type="text", "password" 정도만 사용해봤기 때문에 예약 폼 작성을 위해 연습중!

import { useForm } from "react-hook-form";

...

const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  
  
 ...
  
<form onSubmit={handleSubmit(onSubmit)}>
<div>
          <select
            {...register("people", {
              required: { value: true, message: "people is required" },
            })}
          >
            <option value="" disabled selected>
              인원을 선택해주세요
            </option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <Error>
            {errors.people && <Error>{errors.people.message}</Error>}
          </Error>
        </div>
        
 </form>