[React] react-hook-form이란? / 사용법

react-hook-form이란?

React에서 폼, 양식을 만들때 사용하는 라이브러리

복잡한 폼을 만들때, 간결하고 쉬운 코드작성에 도움이된다!

Home

 

React Hooks 이란?

[React] React Hooks란? / 사용법

 

여러가지 React Form 라이브러리

1. formik

<Formmik> 태그에서 모든 조건과 옵션을 추가하고

<Form> 태그에서는 실제 입력창, 버튼을 추가한다 

2. react-final-form

자체 사용 난이도가 높아, 비효율적

3. redux-form

성능이 좋지 않음 ( 속도 )

리덕스를 사용해야 함

리덕스를 사용할 때 비동기 미들웨어에서 폼을 제어할 수 있는 API를 제공한다

 

react-hook-form의 필요성

기존의 폼에서 입력해야하는 여러가지 번거로운 작업을 줄여준다 ( value 설정, 데이터 전송 관리 등등 )

타입스크립트로 작성된 라이브러리이므로, 타입스크립트와 아주 잘 맞는다.

다른 라이브러리와 다르게 폼을 위한 컴포넌트나, 필드를 위한 컴포넌트가 없다.

불필요한 렌더링을 최소화 한다.

빠른 마운팅

 

---

react-hook-form 설치하기

npm i react-hook-form

 

기존 form 사용법

// Login.js - React 내부의 간단한 로그인 폼

// 웹페이지 상태(state)관리를 위한 useState hook 불러오기
import { useState } from "react";

const Login = () => {
  // 아이디와 비밀번호 state로 관리하기
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  
  // input 태그에서 아이디와 비밀번호 받아와, state 변경해주기
  const onValidName = (event) => {
    setUsername(event.target.value)
  }
  const onValidPassword = (event) => {
    setUsername(event.target.value)
  }
  
  // 로그인 버튼 눌렀을때, 아이디와 비밀번호 state값 가져오기
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(username, password);
  }
  
  //input 값이 바뀔때마다 state값, value값 최신화
  return (
    <form onSubmit={handleSubmit}>
      <Input
        value={username}
        type="text"
        placeholder="아이디"
        onChange={onValidName}
      />
      <Input
        value={password}
        type="password"
        placeholder="비밀번호"
        onChange={onValidPassword}
      />
      <Input type="submit" value="로그인" />
   </form>
  );
};

export default Login;

 

 

---

react-hook-form 사용법 (js)

// react-hook-form에서 폼 만들기 위한 useForm 가져오기
import { useForm } from "react-hook-form"

// react App 내부에서, useForm을 사용해 폼을 만들기위한 여러가지 요소 불러오기
function App() {
  // 폼을 만들기 위한 여러가지 요소 불러오기
  const { register, handleSubmit, getValues } = useForm();
  
  // 데이터 전송시 작동할 함수 정의
  const onValid = (data) => {
    // 기본으로 data 가져오기
    console.log(data)
    
    // getValues()로 data 가져오기
    const { name, firstName } = getValues();
  }
  
  return {
    <div>
      <!-- handleSubmit() 사용, onValid 함수에 post요청 > json 변환. -->
      <form onSubmit={handleSubmit(onValid)}>
        <!-- register이용, name이란 라벨이 붙은 input 생성 -->
        <input {...register("name")}/>
      
        <!-- firstName 라벨, 필수입력 input 만들기 -->
        <input {...register("firstName", { required : true })/>
        
        <!-- email 라벨, 조건만족 input 만들기 -->
        <input {...register("firstName", { 
          pattern : {
            value : /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            errors : "이메일 형식에 맞게 입력해주세요
          }
        })/>
      </form>
    </div>
  }

 

react-hook-form 사용법 (ts)

// react-hook-form에서 폼 만들기 위한 useForm, 폼의 전송함수를 관리하기 위한 SubmitHandler 가져오기
import { useForm, SubmitHandler } from "react-hook-form"

// 폼에 들어갈 데이터 형식 지정하기
type myForm {
  name: string,
  lastName?: string
}

// react App 내부에서, useForm을 사용해 폼을 만들기위한 여러가지 요소 불러오기
function App() {
  // 폼을 만들기 위한 여러가지 요소 불러오기, 폼 타입 지정해주기
  const { register, handleSubmit, getValues } = useForm<myForm>();
  
  // SubmitHandler로 타입 지정해주기 ( data를 사용할 경우에만 지정 )
  const onValid:SubmitHandler<myForm> = (data) => {
    console.log(data)
    
    // getValues만 사용한다면, 이미 타입이 지정되어있으므로 따로 지정해 줄 필요가 없음
    const { name, firstName } = getValues();
  }
  
  return {
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        <input {...register("name")}/>
        <input {...register("firstName", { required : true })/>
      </form>
    </div>
  }