React-hook-form을 이용한 유효성체크

What is React Hook Form

React Hook Form 라이브러리는 React에서 폼을 쉽게 관리하기 위한 라이브러리입니다.

Reack Hook Form은 Rezct hooks를 사용하여 폼을 처리하기 때문에 사용하기 간단한편이며 폼을 처리하는데 필요한 기능을 쉽게 구현할 수 있습니다.

React Hook Form은 폼처리를 위해 불피요한 렌더링을 최소화하고 성능을 향상시키기 위해 최적화 되어있어 성능 문제를 방지할 수 있습니다.

React-Hook-Form 패키지 인스톨

npm: react-hook-form

npm install react-hook-form

React-hook-form을 이용하여 유효성체크하기

useForm()

useForm()은 리액트 훅 폼에서 제공하는 Hook 중 하나입니다.

useForm()에서는 아래와 같은 기능을 제공합니다.

1. register(): 인풋 요소를 등록하는 함수

   1. 각각의 인풋 요소에 대한 Referece를 생성하고 유효성 검사를 위한 다양한 옵션을 전달할 수 있습니다.

   <input
           type="text"
           name="username"
           placeholder="Username"
           ref={register({ required: true })} // validation option 설정
       />

2. handleSubmit(): 폼(Form)을 제출할 때 호출되는 함수입니다.

   1. handleSubmit() 함수는 폼(Form) 데이터를 수집하고, 폼 내에 인풋 요소에 대한 유효성 검사를 실행합니다.

const onSubmit = (data) => {
    console.log(data);
  };
<form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="username"
        placeholder="Username"
        ref={register({ required: true })}
      />
</form>

1. errors: 인풋 요소에서 발생한 에러 메시지를 저장하는 객체입니다.
2. setValue(): 특정 요소의 값을 변경할 수 있는 함수입니다.

const handleSetValue = () => {
    setValue("username", "John Doe");
  };
<form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="username"
        placeholder="Username"
        ref={register}
      />
      <button onClick={handleSetValue}>Set Value</button> {/*// setValue로 값을 변경 */}
      <button type="submit">Submit</button>
    </form>

1. getValues(): 인풋 요소로부터 값을 취득하는 함수입니다.

const handleGetValues = () => {
    console.log(getValues());
  };

<form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="username"
        placeholder="Username"
        ref={register}
      />
      <input
        type="password"
        name="password"
        placeholder="Password"
        ref={register}
      />
      <button onClick={handleGetValues}>Get Values</button> {/* button을 누르면 입력된 값을 콘솔로그로 출력*/}
      <button type="submit">Submit</button> 
    </form>

6.reset(): 등록된 인풋 요소를 초기화하는 함수입니다.

const handleReset = () => {
    reset();
  };
<form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="username"
        placeholder="Username"
        ref={register}
      />
      <input
        type="password"
        name="password"
        placeholder="Password"
        ref={register}
      />
      <button onClick={handleReset}>Reset</button> {/*버튼을 누르면 입력된 인풋 요소를 초기화*/}
      <button type="submit">Submit</button>
    </form>

React-hook-form을 사용하지않고 유효성체크하기

import React, { useState } from "react";

function App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();

    // 유효성 검사 수행
    if (!username) {
      setErrorMessage("Username is required.");
      return;
    }
    if (!password) {
      setErrorMessage("Password is required.");
      return;
    }

    // 폼 제출
    console.log("Username:", username);
    console.log("Password:", password);
    setUsername("");
    setPassword("");
    setErrorMessage("");
  };

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        placeholder="Username"
        value={username}
        onChange={handleUsernameChange}
      />
      <input
        type="password"
        name="password"
        placeholder="Password"
        value={password}
        onChange={handlePasswordChange}
      />
      {errorMessage && <p style={{ color: "red" }}>{errorMessage}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

https://codesandbox.io/p/sandbox/hopeful-leaf-qx56vh?file=%2FREADME.md

위 코드는 리액트훅폼을 사용하지않고 리액트에서 유효성을 체크하는 샘플코드입니다.

위 코드에서는 useState를 사용하여 username, password, errorMessage 값을 관리합니다. 폼을 제출할 때 제출 시 handleSubmit() 함수에서 유효성 검사를 실행합니다.

조건에 해당하지 않는 경우 setErrorMessage() 함수를 호출하여 에러 메시지를 표시합니다. 폼 데이터가 변경될 경우 onChange를 이용하여 상태값을 업데이트하여 유효성체크를 실행합니다.

React-hook-form을 이용하여 유효성검사하기

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

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="username"
        placeholder="Username"
        {...register("username", { required: true, minLength: 10 })}
      />
      {errors.username?.type === "required" && (
        <p style={{ color: "red" }}>Username is required.</p>
      )}
      {errors.username?.type === "minLength" && (
        <p style={{ color: "red" }}>Username must be at least 10 characters.</p>
      )}
      <input
        type="password"
        name="password"
        placeholder="Password"
        {...register("password", { required: true, minLength: 10 })}
      />
      {errors.password?.type === "required" && (
        <p style={{ color: "red" }}>Password is required.</p>
      )}
      {errors.password?.type === "minLength" && (
        <p style={{ color: "red" }}>Password must be at least 10 characters.</p>
      )}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

https://codesandbox.io/p/sandbox/dazzling-sky-2xill0?file=%2Fsrc%2FApp.tsx&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A48%2C"startColumn"%3A1%2C"startLineNumber"%3A1}]

위의 코드는 리액트 훅 폼을 사용하지않은 코드를 리액트훅폼을 이용해서 동일한 기능을 구현한 코드입니다.

useForm() 훅의 register를 이용하여 간단하게 유효성검사를 할 수 있음을 알 수 있습니다.