form library - react hook form, yup

react hook form

https://react-hook-form.com/

여기 홈페이지를 들어가서 보면 이런게 있다.

저기 왼쪽에 있는 react-hook-form을 비제어 컴포넌트(uncontrolled component)라고 한다.
렌더링이 많이 안일어나는게 장점!

get started로 가서 설명서 잘 읽어보자.
yarn add react-hook-form으로 리액트에 설치해보자.

연습페이지를 만들었다.
docs에 보니
import { useForm } from "react-hook-form"
를 하란다.

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


export default function ReactHookFormPage(){
    const {handleSubmit, register} = useForm()

    return (

    )
}

이런식으로 시작중.

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

export default function ReactHookFormPage() {
  const { handleSubmit, register } = useForm();

  function onClickLogin(){
      // loginUser API 요청하기
  }

  return (
    <form onSubmit={handleSubmit(onClickLogin)}>
      이메일: <input type="text" />
      비밀번호: <input type="password" />
      <button>로그인하기</button>
    </form>
  );
}

그리고 form을 만들어서 감쌌다.
form으로 감싼 곳은...

 <form onSubmit={handleSubmit(onClickLogin)}> 

이런 식으로 넣어줘야 한단다..

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

export default function ReactHookFormPage() {
  const { handleSubmit, register } = useForm();

  function onClickLogin(data) {
    console.log(data);
    // loginUser API 요청하기
  }

  return (
    <form onSubmit={handleSubmit(onClickLogin)}>
      이메일: <input type="text" {...register("myEmail")} />
      비밀번호: <input type="password" {...register("myPassword")} />
      <button>로그인하기</button>
    </form>
  );
}

이렇게까지만 쓰고 콘솔로 데이터가 잘 들어오는지 확인해보면

올. 잘들어온다..

이것을 이용해서 에러까지 만들 수 있다고 한다.

yup

https://www.npmjs.com/package/yup
npm에 있는 yup.
yup은 에러를 검증해주는 라이브러리다.
yarn add yup 부터 해서 설치를 해보자.

그리고 아까 만들어둔 로그인 페이지에
아래처럼 쓴다.

import * as yup from 'yup'
// import 시 {}sms export로 내보냈을 때, 암것도 없으면 export default로 내보냈을 때 씀. 
export인 애들을 전부 한꺼번에 가져오고 싶을때는 *로 가져오고 as 뒤에 있는 단어로 바꿔서 import한다는 뜻 

const schema = yup.object().shape({
    myEmail: yup.string().email("이메일 형식이 적합하지 않습니다").required("필수 입력 항목입니다")
    // required는 필수조건이냐는 뜻. 
    myPassword: yup.string().min(4).max(15, "비밀번호는 최소 4자리 이상입니다.").required("필수 입력 항목입니다")
    
})

글고 yupresolver도 깔아서 아래처럼 만들어줬음

import { useForm } from "react-hook-form";
import * as yup from "yup";
// import 시 {}sms export로 내보냈을 때, 암것도 없으면 export default로 내보냈을 때 씀. export인 애들을 전부 한꺼번에 가져오고 싶을때는 *로 가져오고 as 뒤에 있는 단어로 바꿔서 import한다는 뜻
import { yupResolver } from "@hookform/resolvers/yup/dist/yup";

const schema = yup.object().shape({
  myEmail: yup
    .string()
    .email("이메일 형식이 적합하지 않습니다")
    .required("필수 입력 항목입니다"),
  // required는 필수조건이냐는 뜻.
  myPassword: yup
    .string()
    .min(4, "비밀번호는 최소 4자리 이상입니다.")
    .max(15, "비밀번호는 최대 15자리까지입니다.")
    .required("필수 입력 항목입니다"),
});

interface FormValues {
  myEmail: string;
  myPassword: string;
}

export default function ReactHookFormPage() {
  const { handleSubmit, register, formState } = useForm({
    mode: "onChange",
    // 변경이 일어날 때마다 체크
    resolver: yupResolver(schema),
  });

  function onClickLogin(data: FormValues) {
    console.log(data);
    // loginUser API 요청하기
  }

  return (
    <form onSubmit={handleSubmit(onClickLogin)}>
      이메일: <input type="text" {...register("myEmail")} />
      <div>{formState.errors.myEmail?.message}</div>
      비밀번호: <input type="password" {...register("myPassword")} />
      <div>{formState.errors.myPassword?.message}</div>
      <button>로그인하기</button>
    </form>
  );
}

아래처럼 스타일도 줄 수 있따!

import { useForm } from "react-hook-form";
import * as yup from "yup";
// import 시 {}sms export로 내보냈을 때, 암것도 없으면 export default로 내보냈을 때 씀. export인 애들을 전부 한꺼번에 가져오고 싶을때는 *로 가져오고 as 뒤에 있는 단어로 바꿔서 import한다는 뜻
import { yupResolver } from "@hookform/resolvers/yup/dist/yup";
import styled from "@emotion/styled";

interface IMyButtonProps {
  isValid: boolean;
}
const MyButton = styled.button`
  background-color: ${(props: IMyButtonProps) =>
    props.isValid ? "yellow" : ""};
`;

const schema = yup.object().shape({
  myEmail: yup
    .string()
    .email("이메일 형식이 적합하지 않습니다")
    .required("필수 입력 항목입니다"),
  // required는 필수조건이냐는 뜻.
  myPassword: yup
    .string()
    .min(4, "비밀번호는 최소 4자리 이상입니다.")
    .max(15, "비밀번호는 최대 15자리까지입니다.")
    .required("필수 입력 항목입니다"),
});

interface FormValues {
  myEmail: string;
  myPassword: string;
}

export default function ReactHookFormPage() {
  const { handleSubmit, register, formState } = useForm({
    mode: "onChange",
    // 변경이 일어날 때마다 체크
    resolver: yupResolver(schema),
  });

  function onClickLogin(data: FormValues) {
    console.log(data);
    // loginUser API 요청하기
  }

  return (
    <form onSubmit={handleSubmit(onClickLogin)}>
      이메일: <input type="text" {...register("myEmail")} />
      <div>{formState.errors.myEmail?.message}</div>
      비밀번호: <input type="password" {...register("myPassword")} />
      <div>{formState.errors.myPassword?.message}</div>
      <MyButton isValid={formState.isValid}>로그인하기</MyButton>
    </form>
  );
}