[TIL] 220805 코드캠프 25일차

---

1. useApolloClient
2. React-Hook-Form
3. Yup
4. Common-Component

---

##HoF (High Order Function)

Form

1. react-form
2. redux-form
3. formik
4. react-hook-form

제어 컴포넌트 / 비제어 컴포넌트

제어 컴포넌트 : 사용자 입력을 기반으로 state를 실시간으로 관리한다
비제어 컴포넌트 : 바닐라 자바스크립트와 크게 다르지 않은 방식이며 setState를 쓰지 않고 ref를 사용해 값을 얻기 때문에 속도가 빠르다

코드 리팩토링

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

export default function ReactHookFormPage() {
  const { register, handleSubmit } = useForm();
  const onClickButton = (data) => {
    console.log(data);
  };

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

react-hook-form 라이브러리를 사용해 모든 state, onchange 함수를 각각 만들어 주지 않아도 된다
또한 yup을 사용해 까다로운 검증 과정들을 간략하게 작성할 수 있게 된다