[TIL] 최종 프로젝트 (3)

이번 프로젝트에서 내가 맡은 부분 중에 로그인, 회원가입 기능이 있다.
이를 구현하기 위해서 email, password, confirmPassword, nickname 많은 state를 만들어야 할 뿐만 아니라, 실시간 유효성 검사를 구현하고 싶기에, emailError, asswordError, confirmPasswordError, nicknameError 과 같은 state 도 만들어야 한다... (..안 멋져)
그리고 각각의 onChange 함수도 만들어 주어야 한다. (끔찍)
누가 그렇게 하냐고여?

지지난 프로젝트 때 실시간 유효성 검사를 저런 식으로 구현했었다😇

그러나 react-hook-form 이라는 라이브러리를 사용하면 이를 쉽게 그리고 멋지게 구현할 수 있다!!

React Hook Form 이란?

React Hook Form 은 React에서 Form을 쉽게 만들기 위한 라이브러리로, 성능이 좋고 유연하며 유효성 검사에 탁월하다.

👉 공식문서 : https://react-hook-form.com/

<장점>

• 작성해야 하는 코드량이 적어진다! (적은 코드로 좋은 퍼포먼스 가능)
• 다른 라이브러리, react에 비해 re-render 수가 적다.
• Fast Mounting (로딩 속도가 빠르다.)
• TS를 기본으로 지원한다.

설치

먼저 yarn 또는 npm 으로 설치하자.

yarn add react-hook-form
npm install react-hook-form

그리고 form을 만들어보자.

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <form>
        <input type="text" placeholder="username" />
        <input type="submit" />
      </form>
    </div>
  );
}

위와 같은 코드에 React Hook Form 을 적용하고 싶다면 먼저 useForm 이라는 hook 을 불러와야 한다.

Register

register는 input에서 값을 불러오기 위한 함수이다.
다른 옵션을 이용하면 input의 유효성 검사도 쉽게 할 수 있다.

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

export default function App() {
  const { register } = useForm();
  return (
    <div className="App">
      <form>
        <input type="text" placeholder="username" {...register("username")} />
        <input type="submit" />
      </form>
    </div>
  );
}

먼저 사용하기 위해서는 input에 다음과 같이 {...register("사용하고 싶은 이름")} 이라고 적는다.
그러면 나중에 저 이름으로 값을 불러올 수 있다.
(onChange 함수 일일이 만드는 안멋진 방법 안써도 된다.)

input에서 입력하는 값을 실시간으로 확인하기 위해서는 watch라는 함수를 이용할 수 있다.

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

export default function App() {
  const { register, watch } = useForm();
  console.log(watch());
  return (
    <div className="App">
      <form>
        <input type="text" placeholder="username" {...register("username")} />
        <input type="submit" />
      </form>
    </div>
  );
}

watch 함수를 사용하면 지정한 이름과 함께 유저가 입력하는 값이 실시간으로 콘솔에 찍히는 걸 확인할 수 있다.
{ username : "h" }
{ username : "hy" }
{ username : "hye" }
{ username : "hyew" }
{ username : "hyewo" }
{ username : "hyewon" }
{ username : "hyewon " }
{ username : "hyewon h" }
{ username : "hyewon ha" }
{ username : "hyewon han" }

handleSubmit

handleSubmit은 react-hook-form 에서 submit을 관리하기 위해 만든 함수다.

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" placeholder="username" {...register("username")} />
        <input type="submit" />
      </form>
    </div>
  );
}

handleSubmit은 함수를 인자로 받으며, 그 함수에는 data 라는 인자를 기본으로 넘겨준다!
이렇게 넘겨받은 데이터를 출력하면 { username : "hyewon han" } 과 같다!
handleSubmit이 넘겨주는 데이터는 watch 함수가 가장 마지막으로 출력하는 데이터와 동일함을 알 수 있다.

onError

handleSubmit은 두가지 인자를 받는다.

• onSubmit : 정상적으로 submit 되었을 때 실행하는 함수
• onError : form 에서 에러가 났을 때 실행하는 함수 (validation 을 통과하지 못함)

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  const onError = (error) => {
    console.log(error);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit, onError)}>
        <input
          type="text"
          placeholder="username"
          {...register("username", {
            minLength: { // validation check
              value: 5,
              message: "Username must be longer than 5 characters"
            }
          })}
        />
        <input type="submit" />
      </form>
    </div>
  );
}

위와 같이 간단한 valitaion을 구현했을 때
username이 5글자보다 적다면 handleSubmit이 Error가 있다는 것을 감지하고, onSubmit이 아닌, onError를 실행시킨다.
그러면 다음과 같은 출력이 나온다.

실시간 유효성 검사

실시간 유효성 검사를 위해서는 useForm 을 다음과 같이 변경해야 한다.

useForm({ mode: "onChange" });

useForm 을 위처럼 변경하면 react-hook-form은 실시간 유효성 검사를 하게 된다.
먼저 input에 validation을 설정한 후 useForm에서 errors라는 객체를 가져온다.

❗️ HTML에서 입력란 검증을 위해 기본적으로 제공되는 required, pattern, minLength와 같은 검증 타입을 사용할 수 있으며, 각 검증 타입이 실패했을 때 보여줄 오류 메시지도 설정할 수 있다.

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

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  const onError = (error) => {
    console.log(error);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit, onError)}>
        <input
          type="text"
          placeholder="username"
          {...register("username", {
            minLength: {
              value: 5,
              message: "Username must be longer than 5 characters"
            }
          })}
        />
        <input type="submit" />
      </form>
      {erros && <h1>{error?.username?.message}</h1>}
    </div>
  );
}

state 여러개 만들고, onChange 함수 여러개 만들었을 때보다 코드량이 훨씬 줄었다!
그렇지만 아직 갈길이 구만리..⛰️