[WIL] 내배캠4기 React 15주차

hare·2023년 2월 13일
0

내배캠-WIL

목록 보기
15/17

useForm

여태껏 투두리스트, 프로젝트를 거쳐오면서 여러개의 인풋과 그걸 관리하는 state를 만들었었다.
제출하는 인풋창이 많을 수록 setState도 많아졌는데, 리액트 훅 중에 Form을 사용하면 한번에 db에 저장시킬 수 있다.

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

export default function IndexPage() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitSuccessful },
    setError
  } = useForm({
    mode: "onChange"
  });
  const onValid = (data) => {
    console.log("All is right!");
  };
  const onInValid = (errors) => {
    console.log(errors);
  };

  return (
    <form onSubmit={handleSubmit(onValid, onInValid)}>
      <div>
        <span>Name: </span>
        <input
          {...register("userName", {
            required: "Please write down your name"
          })}
          type="text"
        />
      </div>
      <div>
        <span>Email:</span>
        <input
          {...register("email", {
            required: "Please write down your email",
            validate: {
              isNaverEmail: (value) =>
                value.includes("@naver.com") || "Only naver emails allowed"
            }
          })}
          type="email"
          placeholder="Only @naver.com"
        />
        <span>{errors.email?.message}</span>
      </div>
      <div>
        <span>Password: </span>
        <input
          {...register("password", {
            required: "Please write down your password",
            minLength: {
              message: "Password has to be more than 10 chars.",
              value: 10
            }
          })}
          type="password"
          placeholder="Min 10 charactors"
        />
        <span>{errors.password?.message}</span>
      </div>
      <input type="submit" value="Log in" />
      {isSubmitSuccessful && <p>Thank you</p>}
    </form>
  );
}

주간 회고

최종프로젝트가 시작되었고, 새로운 팀원들을 만났다. 함께 프로젝트를 했던 경험이 있는 팀원이 두명이나 있어서 위안이 되었다. 부리더라는 역할을 맡아 팀원들 컨디션 체크나 전체적인 커뮤니케이션을 담당하게 되었는데 지금까지는 소통이 원활하고 즐겁다. 다만 이런 부분에 시간을 쓰다보니 정작 코드 한줄도 못치고 오전 오후를 다 보내는 일이 자주 있었다. 다들 잘해주고 있어서 나만 더 책임감을 가지고 열심히 하면된다는 생각이 들었다.

profile
해뜰날

0개의 댓글