React-Hook-Form 작성중

역시 항상 계획대로 되는 법은 없는 것 같다!
일 끝나고 집에 와서 책을 읽겠다는 나는 어디갔을까,,,?
변명을 하자면 출퇴근만 하루 4시간이 걸리니 너무 정신이 없다ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ
잡설은 여기까지하고 이번에 Ract-Hook-Form이라는 것을 처음 써봤는데 여러모로 좋은 것 같아서 기록을 남겨보겠다!

🤔 React Hook Form 이란?

Performance of React Hook Form

React Hook Form relies on uncontrolled form, which is the reason why the register function capture ref and controlled component has its re-rendering scope with Controller or useController

This approach reduces the amount of re-rendering that occurs due to a user typing in input or other form values changing at the root of your form or applications

React Hook Form is based on Uncontrolled Components, which gives you the ability to build an accessible custom form easily

공식문서에서 말하는 것을 종합해 보자면은, React Hook Form은 ref를 사용한 비제어 컴포넌트를 기반으로 동작하며, 흔히 우리가 props변경으로 인한 리렌더링을을 줄여 성능들 개선시킨 폼 컴포넌트이며, 커스텀 또한 쉽다고 한다.

🤔 제어와 비제어 컴포넌트?

💡 제어 컴포넌트

💡 비제어 컴포넌트

✅ 사용 방법

공식문서에서 나온 코드로 동작 방법을 말해보자면 아래와 같다.

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const [data, setData] = useState("");

  return (
    <form onSubmit={handleSubmit((data) => setData(JSON.stringify(data)))}>
      <Header />
      <input {...register("firstName")} placeholder="First name" />
      <select {...register("category", { required: true })}>
        <option value="">Select...</option>
        <option value="A">Option A</option>
        <option value="B">Option B</option>
      </select>
      <textarea {...register("aboutYou")} placeholder="About you" />
      <p>{data}</p>
      <input type="submit" />
    </form>
  );
}

let renderCount = 0;

function Header() {
  renderCount++;

  return (
    <div style={{ marginBottom: 10 }}>
      <span className="counter">Render Count: {renderCount}</span>
      <p style={{ fontSize: 14, lineHeight: 1.3, marginBottom: 0 }}>
        Performant, flexible and extensible forms with easy-to-use validation.
      </p>
      <a
        className={"preact"}
        target="_blank"
        href="https://codesandbox.io/s/preact-2zsw6?file=/src/index.js"
        style={{
          fontSize: 10,
          height: 20,
        }}
      >
        🐰 Show me the Preact version
      </a>
    </div>
  );
}

이런 화면이 만들어지게 되는데, 맨오른 쪽위에 렌더링 되는 횟수를 표시해준다!