react-hook-form, yup

💡 오늘은 react-hook-form, yup 을 배웠다! 개념은 블로그에서 적기로 하고, 과제 하면서 이해하고 알게된 것들을 간단하게 기록기록

1. react-hook-form 적용하기

작성자, 비밀번호, 제목, 내용 입력창을 만들고, 게시물 등록하기 버튼을 만들기!

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

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

  const onClickSubmit = (data) => {
    console.log(data);

  };

  return (
    <form onSubmit={handleSubmit(onClickSubmit)}>
      작성자 <input type="text" {...register("writer")} />
      비밀번호 <input type="password" {...register("password")} />
      제목 <input type="text" {...register("title")} />
      내용 <input type="text" {...register("contents")} />
      <button>등록하기</button>
    </form>
  );
}

💡 알게된 것

❗️ 위 코드에서 const { register, handleSubmit } = useForm(); 안의 register, handleSubmit이 뭘까... 모르겠어서 알아본 결과, register는 input창 "writer"에 적힌 값들을 불러온다. 위코드를 실행시키고 인풋창에 '안녕!' 이라고 적으면 콘솔에서 객체안에 writer:"안녕!" 을 볼 수가 있었다. ➡️ writer 를 title로 바꾸면 title안에 값이 불러와진다. 일단은 key 네임 생성이라고 이해했다.

❗️ <form onSubmit={handleSubmit(onClickSubmit)}> 에 적힌 onSubmit은 Submit만 해주는게 아니다. 실행되는 함수는 onClick함수였는데, react-hook-form 에서는 이렇게 써주나보다.

❗️ handleSubmit 을 바인딩해야 진짜로 실행시켜줄 함수들이 실행될 수 있다.
❗️ handleSubmit은 함수를 인자로 받으며 그 함수에 data라는 인자를 넘겨주지만 (data)안에 data는 ddd라고 바꿔도 실행이 되더라!

❗️ input에 찍히는 값은 watch 라는 옵션을 이용해서 꺼내볼 수 있다고 한다.

2. yup 사용해서 에러메세지 띄우기

위에 만든 폼에 조건을 설정하고, 맞지 않으면 yup을 이용하여 에러메세지를 띄웠다.

1-1) 작성자는 5글자 이내 문자열
1-2) 비밀번호는 영문, 숫자, 특수문자를 포함한 8자리 이내 문자열
1-3) 제목은 100자 이내 문자열, 내용은 1000자 이내 문자열

💡 알게된 것

위 코드가 내가 한시간 반동안 잡고있던 에러..! 노드모듈즈가 이상한가? 분명 속성이 있는데 왜 저러는거지 싶어서 노드모듈즈 지웠다 깔아보고 했는데 절대 그짝(?)문제가 아니었음.ㅎ.ㅎㅎㅎ..ㅎㅎㅎㅎ (도와주신 천재님께 감사..)

    password: yup
      .string()
      .matches(
        /(?=.*\d)(?=.*[~`!@#$%\^&*()-+=])(?=.*[a-zA-Z]).{1,8}$/,
        "비밀번호는 영문, 숫자, 특수문자를 포함한 8자리 이내로 입력해주세요"
      ),

이렇게 타입지정을 해주니까 에러가 사라졌다. ➡️ .string()추가했음!!!

3. custom-hooks 만들기!

기존에 useState를 사용해서 카운트 버튼을 만들었던 코드를 리팩토링하는 과제였다.
기존 코드는 아래와 같다!

import { useState } from "react";

export default function QuizPage() {
  const [count, setCount] = useState(0);

  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <>
      <div>
        <p>지금의 카운트는 {count} 입니다!</p>
        <button onClick={onClickCountUp}>Count up!</button>
      </div>
    </>
  );
}

리팩토링 후 코드

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

export default function QuizPage() {
  const { handleSubmit, formState } = useForm();

  const CountUp = () => {};

  return (
    <>
      <form onClick={handleSubmit(CountUp)}>
        <div>{formState.submitCount} </div>
        <button>Count up!</button>
      </form>
    </>
  );
}

💡 알게된 것

원래는 state에 담아서 처리해주던것을 이건 도대체 어디에 뭘 담으라는거지 하고있었는데
알아보니 자동으로 해주는 옵션들이 엄청 많아서, 잘 사용하면 됬었다!
내가 사용한건 forState안에 있는 submitCount !!!

사용하니,, 그냥 진짜 {formState.submitCount} 이렇게만 적어주면 되어서 아쥬 편리했다.
어떤 옵션들이 있는지 잘 알고있어야 할듯!! 어렵다어려워

참고한 글