2차 팀 프로젝트에서 처음 사용해본, react-hook-form의 사용기입니다.
react hook form은, 유효성 검사를 손쉽게 실행하는 라이브러리입니다.
왜 사용했나?
리액트와 자바스크립트로 사이트를 만들 때 가장 먼저 배우는것이 로그인/회원가입 기능 구현하기인데, 이것을 순수 자바스크립트 알고리즘으로 하려면 굉장히 많은 if문들을 거치게 됩니다. (숙련된 개발자라면 다른 방식으로도 해결이 가능하겠지만요)
저는 이러한 복잡한 알고리즘을 사용하여 코드를 낭비하기 싫었기 때문에, 라이브러리를 사용하게 되었습니다.
사실 귀찮았던 거지
설치 및 사용
라이브러리를 설치하는 것은 간단합니다. npm 패키지를 이용해 설치했습니다.
npm install react-hook-form사실 이 라이브러리 공식 문서도 상당히 정리가 잘 되어있는편이라, 공식문서의 코드를 보면서 적용이 가능한 수준입니다.(타입스크립트 버전도 예시가 나와있으니 활용해보세요.)
아래는 react hook form 공식문서의 시작 레퍼런스 코드입니다.
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
console.log(watch("example")); // watch input value by passing the name of it
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}import 및 기능 훑어보기
천천히 볼까요? 일단 useForm 이라는 hook을 import하는 것을 알 수 있습니다.
const { register, handleSubmit, watch, formState: { errors } } = useForm();이 useForm은 객체로 구성되어 있는데, 여러가지 기능(메소드)들이 들어간 객체에요. 이 객체에서 필요한 기능들을 꺼내 쓰는 방식입니다.
위에서는 register, handleSubmit, watch, formState: { errors } 등을 꺼냈어요.
formState:{errors} 는 에러 코드를 출력하기 위한 객체인데, 왜 이렇게 생겼는지는...저도 모르겠습니다!
어쨌든 저 객체에서 필수적으로 쓰일만한 것은 resister, handleSubmit 정도였습니다.
const onSubmit = data => console.log(data);이건 뭘까요? data라는 매개변수를 받아 콘솔로 출력합니다.
입력한 데이터들을 확인하기 위한 용도입니다.
console.log(watch("example"));이건 뭐죠? useForm()의 watch는 이름대로 실시간으로 데이터 입력값을 감시합니다.
watch 안의 괄호는 watch 함수가 감시할 input의 이름을 뜻합니다.
example이라는 이름을 가진 input에 어떤 데이터가 들어가는지, 실시간으로 콘솔로 출력해줄거에요.
handleSubmit
이제 주석과 함께 위의 useForm 메소드가 쓰인 부분을 봅니다.
//"handleSubmit" will validate your inputs before invoking "onSubmit"
//"handleSubmit"은 "onSubmit"을 호출하기 전에 입력의 유효성을 검사합니다.
<form onSubmit={handleSubmit(onSubmit)}>말이 복잡하게 쓰였지만, form 태그에 위에서 가져온 handleSubmit함수를 걸어준다는 겁니다.여기서 조심해야할건 form에 쓰인 onSubmit 메소드와 앞서 변수로 만든 데이터인 onSubmit을 헷갈리지 않아야 할 것.
form에 쓰인 onSubmit은 기본으로 제공되는 메소드입니다!
register()
//register your input into the hook by invoking the "register" function
//"등록" 기능을 호출하여 후크에 입력을 등록하십시오.
<input defaultValue="test" {...register("example")} />공식문서의 글을 구글 번역기에 돌리면 안되는 이유입니다.
무슨 소리인지 모르겠습니다.
먼저 리액트에서 input 태그는 value 프로퍼티가 defaultValue로 사용됩니다.
훅폼을 사용하려면 그저 태그 안쪽에 {...register}을 넣어주면 됩니다. 괄호 안에 들어간 example은 무슨 데이터일까요?
데이터가 아니라 해당 입력폼의 이름입니다.
만약에 저 input 태그의 역할이 아이디 입력창이라면, {...register("idInput")}으로 변경될 수 있겠죠. 어쨌든 저 괄호 안의 이름은, 맨 마지막 onSubmit 데이터가 콘솔에 출력될때의 키값이 됩니다.콘솔로 확인하는게 공식문서의 문장을 이해하는것보다 쉽습니다.
다음 줄을 확인할게요.
{required}
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />일단 이 태그에도 유효성 검사 함수인 register가 들어가 있네요. 이 input의 이름은 exampleRequired 입니다.뒤에 다른 객체가 또 있네요. 뭘까요?
눈치 빠른 사람이라면 알겠지만, 해당 태그의 값이 필수값이어야 하는지 정해줍니다.
required 프로퍼티는 옵션으로 정할 수 있고, 그래서 우리는 input 태그에 required 속성을 부여할 필요가 없습니다.
error handling
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}이 부분은 에러가 생길 시 어떤 결과가 나오는지 알려주는 부분입니다.
위의 formState :{errors}에서 errors는 다양한 에러 프로퍼티들을 가지고 있습니다.
errors의 exampleRequired 키값이 true라면, This field is required 즉 필수값을 입력하지 않았다는 오류 메세지가 뜨겠죠.
<input type="submit" />아래에 submit 역할을 하는 버튼만 추가하고, 별도의 함수는 걸지 않습니다.
공식문서의 샌드박스에서 어떤 화면과 기능들이 벌어지는지 더욱 쉽게 확인할 수 있습니다.
마무리
와!정말 쉽다! 이제 이것만 있으면 나도 유효성 검사를 뚝딱?
당연히 아닙니다. 공식문서에서 올려준 저 코드는 정말 기본의 기본의 기본의 기본적인 문법과 사용법만 알려준 상태고, 제 코드에 제가 원하는 유효성을 적용하려면 또다른 학습이 필요합니다.
스크롤이 길어졌으므로 첫 포스팅은 여기까지!
