🗒️ react-hook-form이 얼마나 편하길래..

안녕하세요! 이번 글에서는 정말 유용하고 널리 쓰이는 react-hook-form에 대해 알아보려 합니다.

react-hook-form은 react에서 form 관련 코드를 줄이고 다양한 기능을 제공하는 라이브러리인데요.

특히 여러개의 입력이 필요할 때 유용하게 쓰입니다!

 

❓ react-hook-form?

이름에서부터 알 수 있듯이 React 기반의 form 라이브러리입니다. 이 라이브러리는

순수 React로 form을 구현했을 때보다 코드를 줄이고 form 상태 관리를 위한 기능들을 제공합니다.

react-hook-form은 최적화된 렌더링을 통해 불필요한 렌더링을 방지합니다.

특히 react-hook이란 이름처럼 함수형 컴포넌트에서 상태를 편리하게 다룰 수 있습니다.

유효성 검사와 오류 처리에서도 높은 편리함을 제공합니다!

 

자꾸 유용하다 편리하다 이런 말을 하는데 어떤 면에서 유용한지 예시를 보겠습니다.

 

💻 Example

import { useState, FormEvent } from "react";

function FormEx() {
  const [phone, setPhone] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [erros, setErrors] = useState<{phone: string, email: string, password: ""}>({
    phone: "",
    email: "",
    password: ""
  });
  
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    setErrors({phone: "", email: "", password: ""});
    if (phone === "") {
      setErrors((prev) => {...prev, phone: "Phone is Required."});
      return;
    }
    else if (email === "") {
      setErrors((prev) => {...prev, email: "Email is Required."});
      return;
    }
    else if (password === "") {
      setErrors((prev) => {...prev, password: "Password is Required."});
	  return;
    }

    // form submit 로직...
  };
  
  return (
    // ...form JSX
  );
}

export default FormEx;

 

사실 주석 처리 한 코드까지 쓰면 너무 길어져서 생략했습니다.

하지만 이 코드만 봐도 어떤가요? 벌써부터 상태들이 미쳐 날뛰고 있습니다..

만약 위 코드처럼 3개가 아니라 여러 입력칸이 있다면? 끔찍하네요..

 

오류 처리 부분도 그렇습니다.  만약 비어있는 조건뿐 아니라 정규식, 길이까지 조건을 건다면

어떻게 되나요? 아무리 클린코드를 짜려 노력해도 힘들고 복잡할겁니다.

 

생략한 form JSX 부분도 여러 input이 있다면 하나하나 value와 onChange 함수를

작성해주어야 할 것 입니다. 무조건 나쁜 코드는 없기는 합니다만 줄이고

가독성 있게 바꿀 수 있는 방법이 있다면 적용해보는 게 좋을 것 같습니다.

 

다음은 react-hook-form을 적용한 코드입니다. 이번엔 통신 로직을 제외한

전체 코드를 작성해보겠습니다.

 

import { useState, FormEvent } from "react";
import { SubmitHandler, useForm } form "react-hook-form";

interfae FormTypes {
  phoen: string;
  email: string
  password: string;
};

function FormEx() {
  const { register, handleSubmit, formState: { erros } } = useForm<FormTypes>();
  
  const onSubmit: SubmitHandler<FormTypes> = (data) => {
    console.log(data);
    // form submit 로직...
  };
  
  return (
    <form onSubmit={handleSubmit(onSUbmit)}>
      <input {...register("phone", {
        required: "Phone is Required"
      })} type="text" placeholder="Input Your Phone" />
      <span>{erros.phone && erros.phone.message}</span>
      <input {...register("email", {
        required: "Email is Required"
      })} type="text" placeholder="Input Your Email" />
      <span>{erros.email && erros.email.message}</span>
      <input {...register("password", {
        reuqired: "Password is Required"
      })} type="password" placeholder="Input Your Password" />
      <span>{erros.password && erros.password.message}</span>
    </form>
  );
}

export default FormEx;

 

한 눈에 봐도 아까의 코드보다 상태도 줄었고 에러 관리도 편리해졌습니다.

react-hook-form은 아주 다양한 기능들을 제공하는데 이렇게 부분적인 내용만봐도

왜 개발자들이 많이 쓰는지 아실 것 같나요? (github stars가 38.7k..ㄷㄷ)

 

보시면 오류 관리도 erros라는 한 객체에서 모두 가져올 수 있습니다.

오류 설정은 register안에 작성해주면 되는데 현재는 required만 했지만

validate, maxLength, pattern 등등 여러 오류들을 관리할 수 있습니다.

 

위 코드에선 쓰지 않았지만 해당 필드 값을 가져오기 위해 watch라는 함수도

사용할 수 있고요. 정말 유용하지 않나요? ㅎ

 

⭐ 기능들

위는 예제는 잘 보셨나요? 그럼 react-hook-form의 주요 함수들(기능들)을 알아보겠습니다.

 

useForm

react-hook-form 라이브러리에서 제공하는 hook 중 하나로 form 요소의 상태, 유효성 검사,

submit handle 등 다양한 기능들을 제공합니다.

 

아래 함수들은 모두 useForm에서 제공하는 것들 입니다.

register 

예제에서 봤듯이 필드를 react-hook-form의 form 상태와 연결해주는 함수입니다.

name 속성을 등록한 후 여러 오류 관리를 위한 유효성 검사 규칙들을 설정할 수도 있죠.

register를 사용하면 해당 필드를 추적하고 제어할 수 있도록 도와줍니다. 필수로 사용해야되는

함수입니다!

 

watch

name을 입력받아 해당 필드의 값을 실시간으로 감시하는 함수입니다.

이 함수를 통해 내가 원하는 필드의 값을 가져올 수 있습니다.

 

handleSubmit

이름대로 제출과 관련된 이벤트를 처리하는 함수입니다. 인자로는 이벤트 핸들러를 받고

순수 React로 form을 구현했을 때는 새로고침을 막기 위해 e.preventDefault를 해줬지만

자동으로 e.preventDefault 작업을 해줍니다. 인자로 주는 이벤트 핸들러는

form의 상태를 인자로 받을 수 있습니다. 만약 유효성 검사를 통과하지 못하면

제출 이벤트를 실행시키지 않습니다.

 

setValue

name을 입력받아 해당 필드의 값을 수동으로 설정하는 데 사용되는 함수입니다.

 

formState

현재 form의 상태를 나타내는 객체입니다. formState는 다음과 같은 주요 속성들이 있습니다.

이를 통해 form을 효과적으로 관리할 수 있게 해줍니다.

 

1. errors

각 입력 필드의 유효성 검사에 대한 오류들을 담고있는 객체입니다. 필드의 이름을 key로 갖고

유효성 검사를 통과하지 못하면 message를 보여줍니다.

2. isSubmitted

form이 한 번이라도 제출되면 true를 반환하고 아니라면 false를 반환합니다.

3. isSubmitting

form이 현재 제출 중인지 확인해 제출 중이라면 true를 반환하고

아니라면 false를 반환합니다.

4. submitCount

현재 form이 몇 번 제출됐는지 나타냅니다.

5. isSubmitSuccessful

제출이 성공한다면 true를 반환하고 아니라면 false를 반환합니다.

6. touched

입력 필드가 터치 되었는지 여부를 확인합니다. 필드의 이름을 key로 갖고

각각의 입력 필드에 대해 터치되었는지 상태를 true와 false로 반환합니다.

7. isValid

모든 입력 필드가 유요한 상태일 때 true를 반환하고 하나라도 유효하지 않다면

false를 반환합니다.

8. dirty

현재 form이 수정되었는지 상태 여부를 나타냅니다. 하나의 입력 필드라도 수정된다면

true를 반환하고 아니라면 false를 반환합니다.

 

getValue

필드의 이름을 인자로 받아 해당 필드의 값을 가져옵니다. watch와 유사하지만

watch는 값이 변경될 때마다 리렌더링을 트리거하는 쪽에 사용됩니다.

반면 getValue는 오로지 값을 갖고 오는 것에 초점이 맞춰져 있습니다.

 

📖 마무리

react-hook-form에 어떤 것들이 있는지 이렇게 자세히 알아보고 정리해본 건 처음이라

잘 쓰지 않던 기능까지 알게되어 좋았습니다! 저는 처음에 일반적인 form을 작성하다

react-hook-form으로 바꾼 뒤 희열을 느꼇습니다.. 정말 편했거든요. 상태도 확 줄고 오류 관리도

편해졌으니까요. 그래서 이 글을 읽으시는 분들도 이 라이브러리를 사용해서

form을 효율적으로 관리하셨으면 좋겠습니다. 정리하지 못한 다른 유용한 기능들도

많습니다. 공식문서도 아주 잘 정리돼있습니다.

읽어주셔서 감사합니다!!