react-hook-form 과 zod 도입하기

react hook form 도입이유

React 애플리케이션에서 폼을 쉽고 효율적으로 관리할 수 있게 해주는 라이브러리입니다. 기존의 커스텀으로 form과 input 태그를 만들어 form을 관리하는경우 들어오는 input의 입력에 따라 상태변화가 일어나고 변화가 필요하지 않은 다른 요소에 리렌더링이 이루어지면서 불필요한 리렌더링을 방지할 필요가 있었습니다. 이런 상황에서 리렌더링의 범위를 좁히는 방식을 state colocation 이라고 하는데, react hook form 같은 경우 state colocation을 적용하기 좋은 라이브러리 입니다. 저도 같은 이유로 프로젝트에 state colocation을 적용하기 위해 react hook form을 도입하게 되었습니다.

react hook form 도입 과정

먼저 설치를 해줍니다.

npm i react-hook-form

react hook form은 useForm 을 이용해 form을 제어하는 기능을 제공합니다.

• register : input에 들어가는 값을 저장하고 관리합니다.

• handleSubmit : register를 통해 받은 input들의 값을 사용해 submit 이벤트를 제어할수 있는 메소드 입니다.

• watch : register를 통해 input에 들어간 값을 관찰할 수 있습니다.

• isSubmitting : submit중인 상태인지 아닌지 판별하는 속성입니다.

• errors: register에 등록한 값이 에러인지 아닌지 판단하는 속성입니다.

• mode: 어떠한 이벤트에서 해당 기능들을 적용할지 선택합니다. 'onChange'인 경우 input에서 onChange 이벤트가 발생할 때 마다 useForm의 기능을 사용합니다.

• resolver : zod의 스키마와 react-hook-form을 연결합니다.

먼저 input 데이터를 받을수 있도록 연결을 해야 합니다.

register를 이용해 위와같이 설정을 해주면 됩니다. 첫번째 인자로는 name 값, 두번째 인자로는 해당 input값에 대한 유효성 검증 속성을 지정해주면 됩니다.

• required : 값이 비어있을시 에러(빈문자열)와 메시지 반환
• pattern : 해당 패턴을 만족하지 않을시 에러 메시지 반환

zod 도입하기

위와같이 register를 input에 등록하면서 유효검 검증까지 추가 할 수 있습니다. 하지만 컴포넌트 렌더링 부분에 유효성 로직을 작성하면서 복잡해지는 단점이 있었는데요. zod를 도입해 유효성 검증 로직을 분리하고 타입과 관련한 다양한 API, 타입추론 등을 적용할 수 있습니다. react hook form에 zod를 도입하는 방법은 아래와 같습니다.

먼저 zod와 react hook form과 zod를 연결해주는 플러그인 @hookform/resolvers 를 설치해줍니다.

npm i zod @hookform/resolvers

z와 zodResolver를 import 해줍니다.

zod 에서 가져온 z를 이용해 타입지정을 할 수 있는 스키마를 생성합니다.
string, min, email, refine, regex 등 여러 방식으로 유효성 검증과 타입 검증을 적용할 수 있습니다.

마지막으로 zodResolver를 이용해 스키마와 useForm을 연결하면 zod의 유효성 검증이 react hook form을 통해 적용됩니다.