react-hook-form 사용법(1)

이번 포스트에서는 react-hook-form 사용법에 대해 알아본다.

 

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

기존에 제공하는 폼을 사용할 경우, 간단한건 쉽게 되지만, 복잡하고 다양한 정보를 받는 폼을 만들 경우, 원하는대로 다루기가 매우 복잡해진다.

이 때, 간결하고 쉬운 코드작성을 도와주는 것이 react-hook-form 이다.

 

react-hook-form은 기존의 폼에서 입력해야 하는 여러 번거로운 작업을 줄여주고, Typescript로 작성되어 호환이 잘 된다. 또한, 컴포넌트 기반으로 작동하여, 성능이 우수하다.

 

1. 설치

npm i react-hook-form

 

2. 사용법

기존 Form

import { useState } from "react";

const Login = () => {
  const [loginInfo, setLoginInfo] = useState({id: "", password: ""});
  
  const onChangeHandler = (event) => {
  	setLoginInfo({...loginInfo, [event.target.name]: event.target.value})
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(id, password);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="id" value={loginInfo.id} onChange={onChangeHandler}/>
      <input type="password" name="password" value={loginInfo.password} onChange={onChangeHandler}/>
      <button type="submit">로그인</button>
    </form>
  );
}

export default Login

 

react-hook-form (js)

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

export default function App() {
	// 폼을 만들기 위한 여러가지 요소 불러오기
	const { register, handleSubmit, formState: {errors} } = useForm();
    
    // 로그인 시 데이터 콘솔 창에 출력
	const login = (data) => {
		console.log(data);
	}
    
	return (
		<form onSubmit={handleSubmit(login)}> // handleSubmit은 login함수를 호출하기 전에 입력을 확인함
			<input type="text" {...register("id", { required: true })} /> // register를 통해 값을 입력하고, 옵션에 유효성 검사를 넣는다.
			{errors.id && <span>This field is required</span>} // 유효성 검사에서 error가 발생할 경우 나타날 메세지 설정
			<input type="password" {...register("password", { required: true })} />
			{errors.password && <span>This field is required</span>}
		</form>
	);
}

 

react-hook-form (ts)

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

// 폼에 들어갈 데이터 타입 지정
interface loginData {
	id: string;
	password: string;
}

export default function App() {
	// 폼을 만들기 위한 여러가지 요소 불러오기
	const { register, handleSubmit, formState: {errors} } = useForm();
    
    // 로그인 시 데이터 콘솔 창에 출력
	const login:SubmitHandler<loginData> = (data) => {
		console.log(data);
	}
    
	return (
		<form onSubmit={handleSubmit(login)}> // handleSubmit은 login함수를 호출하기 전에 입력을 확인함
			<input type="text" {...register("id", { required: true })} /> // register를 통해 값을 입력하고, 옵션에 유효성 검사를 넣는다.
			{errors.id && <span>This field is required</span>} // 유효성 검사에서 error가 발생할 경우 나타날 메세지 설정
			<input type="password" {...register("password", { required: true })} />
			{errors.password && <span>This field is required</span>}
		</form>
	);
}

 

 

---

 

기본 사용법은 위와 같이 쓸 수 있다.

현재 코드는 간단한 로그인 폼을 임의로 만든 것으로 아이디와 비밀번호만 필요하다.

따라서, 코드를 비교해보면 별 차이가 없어보이지만, 폼이 복잡해질수록 react-hook-form은 유용하게 쓰인다.

 

이번 포스트에서는 기본적인 사용법만 알아봤지만, react-hook-form은 유효성 검사, onChange 등, 다양한 기능들을 지원하여 사용법에 맞게만 쓰면 활용폭은 굉장히 넓다.

또한, 타입스크립트를 사용하는 방식도 내가 사용한 방법과 공식문서에서 나타내는 방법은 약간의 차이점이 있다.

좀 더 자세한 사용법과 기능들을 알아보길 원한다면, 공식문서를 살펴보는 것을 추천한다.

https://react-hook-form.com/kr/

홈

 

이상으로 react-hook-form 에 대해 간단히 알아보았다.

다음 포스트에서는 react-hook-form에서 자주 사용되는 기능들에 대해서 좀 더 알아본다.