[React] react-hook-form 사용하기

React-hook-form

왜 기존 form 사용 대신 이걸 쓰는게 더 편리한지 어떤  장점이 있는지 찾기 

제어 컴포넌트 
우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.
출처 : 리액트 공식문서 제어 컴포넌트

 

제어 컴포넌트는 리액트에 의해 값이 제어되는 입력 폼 엘리먼트를 뜻한다. 

제어 컴포넌트는 실시간으로 값이 동기화 되는 특징이 있다. 

 

기존 리액트에서 input값을 받아올 때  아래 예시와 같이 state 만드는 식으로 사용했는데

state 값이 변경될때마다 리렌더링이 되는 특징과 사용자의 입력 폼이 늘어나면 관리해야할 state가 늘어나고 입력할때마다 컴포넌트 자체가 리렌더링되며 유효성검사까지 하면 에러 상태 관리할 state와 검증함수라 늘어나는 등 코드 유지보수가 힘들다. 

const [value, setValue] = useState("");

   <input
     type="text"
     value={value}
     onChange={(e) => setValue(e.target.value)}
   />

 

그리고

비제어 컴포넌트는 

제어컴포넌트의 반대로 리액트에 의해 값이 제어되지 않는 컴포넌트를 뜻한다. 

비제어 컴포넌트 방식을 사용하면 같은 메모리 주소를 가지게 되기 때문에 제어 컴포넌트처럼 실시간으로 값을 동기화 시키지 않고, state 로 값을 관리할 필요가 없이 submit 버튼을 누르면 그 값을 받아오게 된다.

 

입력 폼이 늘어나도 state를 늘릴 필요도 없으며, 값이 변경되어도 리렌더링 되지 않는다. 리액트에서 불필요한 리렌더링을 막는건 성능 개선에 필수적인 요소이다.

 

 

그래서

react-hook-form을 사용한 이유는  비제어 컴포넌트의 장점과 제어 컴포넌트에서 다루는 실시간 유효성검사 실시간 동기화등의 API를 제공해 가능하게 해주기 때문이다. 

• 리렌더링을 최소화시켜 마운팅 속도를 높여준다.
• 라이브러리를 선택할 땐 패키지 크기도 중요하다. 공식 홈페이지에 super light라고 표기된 걸 확인할 수 있을 정도로 종속성이 없는 작은 사이즈의 라이브러리이다.
• react-hook-form은 ref 에서 register 함수가 실행되어 전체 form이 리렌더링 되지 않으면서도 실시간으로 입력값을 받아올 수 있다. 값이 변경되지 않은 채 제출을 누르면 리렌더링이 되지 않고, 값의 변화가 있을 때에만 값을 다시 받아온다.

register 함수에 의해 하나의 객체에 담겨 출력되어 간편하고 유효성 검사 및 에러를 받아올 수 있는 api가 있으므로 간편하게 form을 관리할 수 있다.