React Hook Form 인트로

React Hook Form 이란

• 정의 : 사용하기 쉬운 유효성 검사와 함께 성능 기준에 맞으며 유연하고 확장 가능한 폼
• 사용 가능한 프레임워크 : 말 그래도 React와 React Native에서 사용 가능함

특장점

• re-render 방지 : component를 분리하여 re-render 방지 및 성능 향상
• Subscriptions : 개별 input을 subscription
• 렌더링 줄이기
• 더 빠른 mounting(Component가 실행되고 요소가 DOM 추가 및 업데이트)

설치하기

npm install react-hook-form

아래 간단한 예시를 만들어 보았습니다.

1. 먼저 기본 react 컴포넌트에서 useForm 함수를 react-hook-form에서 가져옵니다.
   • useForm 함수는 양식을 쉽게 관리할 수 있게 만들어 주는 사용자 정의 hook 입니다.

import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
 

  return (
    <div className="App">
      <h1>React Hook Form 예시</h1>
    </div>
  );
}

2. 그 다음 form 태그를 추가해줍니다.

import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
 

  return (
    <div className="App">
      <h1>React Hook Form 예시</h1>
      <form>
      </form>
    </div>
  );
}

3. 값을 입력해줄 input, select 태그를 추가해줍니다.

import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";

export default function App() {

  return (
    <div className="App">
      <h1>React Hook Form 예시</h1>
      <form>
        <input/>
        <select>
          <option value="female">여성</option>
          <option value="male">남성</option>
          <option value="other">기타</option>
        </select>
        <input type="submit" />
      </form>
    </div>
  );
}

4. useForm에서 input을 등록하거나 요소를 선택하고 React Hook Form에 적용할 수 있도록 해주는 register와 form 유효성 검사가 성공할 때 폼 데이터를 받아오는 함수인 handle submit을 가져옵니다.

import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";

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

  return (
    <div className="App">
      <h1>React Hook Form 예시</h1>
      <form>
        <input />
        <select>
          <option value="female">여성</option>
          <option value="male">남성</option>
          <option value="other">기타</option>
        </select>
        <input type="submit" />
      </form>
    </div>
  );
}

5. register는 등록 시킬 요소에 이름을 할당하고 submit 버튼을 클릭하여 폼 데이터를 가져와 console.log에 표시되도록 구현합니다.

import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";

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

  return (
    <div className="App">
      <h1>React Hook Form 예시</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} />
        <select {...register("gender")}>
          <option value="female">여성</option>
          <option value="male">남성</option>
          <option value="other">기타</option>
        </select>
        <input type="submit" />
      </form>
    </div>
  );
}