[React] React Hook Form

1. React Hook Form
_① React Form 예제 (간단한 To Do List)
_② React Form 예제 2 (React Hook Form update)
2. React Hook Form, APIs

---

1. React Hook Form

React Hook Form은 React에서 'form'을 좀 더 사용하기 편하게 해주는 라이브러리로

<form>의 상태 state와 유효성 검사를 처리하기 위한 간편한 방법을 제공해 주는 라이브러리다.

 

React Hook Form은 아래 명령어를 입력해서 설치할 수 있다.

npm install react-hook-form

 

백문이 불여일견, 기존에 React에서 form을 다루던 방식을 아래 예제를 통해서 복습해 보자.

---

① React Form 예제 (간단한 To Do List)

 

React Form 예제 / Error 발생한 경우

 

import {useState} from "react";
import {styled} from "styled-components";

const Box = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;

    .Errors {
        color: red;
    }
`;

function App() {
  const [ToDo, setToDo] = useState("");
  const [ToDos, setToDos] = useState("");
  const [Errors, setErrors] = useState("");

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    /*
      일정을 입력하지 않은 상태에서
    추가 버튼 클릭하면 Error 발생시키는 Logic
    */
    if (ToDo === "") {
      setErrors("일정을 입력하지 않았습니다.");
      setToDo("");
    } else {
      setToDos(ToDo);
      setToDo("");
      setErrors("");
    }
  };

  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    setToDo(event.currentTarget.value);
  };

  return (
    <Box>
      <h2>To Do List</h2>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="일정을 입력해주세요."
          value={ToDo}
          onChange={onChange}
        />
        <button>추가</button>
      </form>
      <div>
        <h4>추가된 일정</h4>
        <div>{ToDos}</div>
      </div>
      <div>{Errors !== "" ? <h4 className="Errors">{Errors}</h4> : null}</div>
    </Box>
  );
}

 

React에서 Form을 어떻게 사용하는지 복습하기 위해서 간단한 To Do List 예제를 구현해 봤다.

일정 입력 form의 값을 state로 관리하고, '추가' 버튼을 클릭하면 form의 onSubmit event 발생된다.

 

form의 onSubmit event handler를 통해서 방금 입력했던 일정이

ToDos state로 넘어가고, ToDos에 저장된 일정은 하단의 '추가된 일정' 컴포넌트에 출력된다.

 

그리고 사용자가 일정을 입력하지 않고, '추가' 버튼을 클릭하면 비어있는 일정이 출력되는데

이는 의도한 사항이 아니기 때문에 Error를 발생, Error 여부를 관리할 state를 추가하고

 

해당 state에 Error가 발생했다는 것을 알려주는 문자열을 전달하고

이는 '추가된 일정' 컴포넌트 바로 아래에 출력되게끔 코드를 작성하였다.

---

 

위의 예제에서 input form의 입력 값과 Error 사항을 총 3개의 state를 통해서 관리하고 있는데

여기서 입력한 일정을 보관하는 용도로 사용 중인 ToDos를 제외한다고 쳐도

 

'<input/>'에 입력한 값을 관리하는 state와, 값을 입력하지 않은 상태에서 제출하는 등의

Error 발생 여부를 관리하는 state로 총 두 개 정도의 state를 사용한다.

 

물론 input form의 개수가 적다면 이는 크게 문제가 되는 사항은 아니다.

 

다만 여기서 input form의 개수가 늘어난다고 가정해 보자.

해당 form의 상태, onChange, onSubmit 등 event Handler, 그리고 Form의 유효성 검사를 관리하는 코드 등

각 Input Form 별로 개별적으로 코드를 만들어줘야 하는데 이는 매우 번거롭고 귀찮은 작업일 것이다.

 

React Hook Form 라이브러리를 사용하면 form의 상태와 form의 유효성 검사를 관리하는

코드의 양을 대폭 줄이는 것이 가능하고 onChange, onSubmit 같은 Event Handler를 작성할 필요도 없어진다.

React Hook Form에서 제공되는 Hook을 통해서 이를 대체하는 것이 가능하기 때문이다.

---

② React Form 예제 2 (React Hook Form update)

 

기존 Form 관련 코드를 react-hook-form 코드로 수정만 진행하였다.

 

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

interface ToDo_Types {
    ToDo: string;
    errors: {
        ToDO: {message: string};
    };
}

const Box = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;

    .Errors {
        color: red;
    }
`;

function ToDoList(){
    const {
        register, 
        handleSubmit, 
        formState: {errors}, 
        setError,
        setValue
    } = useForm<ToDo_Types>();

    const [ToDos, setToDos] = useState("");

    const onValid = (data: ToDo_Types) => {
        if(data.ToDo === ""){
            setError("ToDo", {message: "일정을 입력하지 않았습니다."});
            setValue("ToDo", "");
        } else {
            setToDos(data.ToDo);
            setValue("ToDo", "");
        }
    }

    return (
        <Box>
            <h2>To Do List</h2>
            <form onSubmit={handleSubmit(onValid)}>
                <input
                    {
                        ...register("ToDo", {required: "일정을 입력하지 않았습니다."})
                    }
                    placeholder="일정을 입력해주세요."
                />
                <button>추가</button>
            </form>
            <div>
                <h4>추가된 일정</h4>
                <div>{ToDos}</div>
            </div>
            <h4 className="Errors">{errors.ToDo?.message}</h4>
        </Box>
    );
}

 

기존 예제에서 Form 상태 관리하는 코드, Event Handler, Error 등의 Form 유효성 검사를 하는 코드

전체에 대해서 React Hook Form을 활용한 형태로 소스코드를 업데이트를 진행하였다.

 

이전 버전과 비교했을 때 조금 더 간결해졌다는 것을 파악할 수 있다.

React Hook Form에 대해서는 바로 다음 장에서 설명할 것이기 때문에

지금은 이런 게 있다. 정도로 하고 넘어가도록 하자..

---

2.  React Hook Form, APIs

작성 중...

---

📔 Reference
React Hook Form 공식 문서

---

⏰ Update Log
2024.08.26 React-Hook-Form 개요 작성 완료