코드 길이가 다른 라이브러리 보다 짧아 syntax가 깔끔하고, 리액트 본연의 syntax와 비슷하여 사용하기 편함.
비제어 컴포넌트 방식의 사용으로 불필요한 렌더링을 막아주어 속도가 빠르다.
💡
제어 컴포넌트
HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 함. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됨.
폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (Controlled Component)”라고 한다.
간단히 말하자면, State가 렌더링을 제어하는 것을 제어 컴포넌트라고 하는데 onChange 방식이 제어 컴포넌트라고 할 수 있다.
사용자가 입력한 값과 저장되는 값이 실시간 동기화.
이러한 방식으로 데이터를 전부 받아올 수 있어 유효성 검사에 탁월한데,
데이터를 하나하나 다 받아오므로 비효울적이거나 속도가 느릴 수 있다는 단점이 있음.
💡
비제어 컴포넌트
대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋지만, 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에서 다루어집니다. 대안인 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어집니다.
모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.
ref는 값을 업데이트 하여도 리렌더링 되지 않는 특성으로, 입력이 모두 되고난 후 ref를 통해 값을 한번에 가져와서 활용한다.
state로 값을 관리하지 않기 때문에 값이 바뀔 때마다 리렌더링을 하지 않고 값을 한 번에 가져올 수 있는 성능상 이점이 있으나, 데이터를 완벽하게 가져올 수 없는 단점이 있다.
하지만 react-hook-form은 비제어 컴포넌트로 렌더링을 최적화할 수 있는 라이브러리이다.
단순한 form을 처리하기 위해 state로 모든 값을 검사하여 리렌더링 하는 것보다, 입력이 끝난 후 유효성 검사를 보여주어도 되고 더 빠른 검사를 할 수 있어 비제어 컴포넌트 방식인 react hook form을 많이 사용하는 것.
🚀 React-hook-form 사용 이유
유효성 검사를 쉽게 할 수 있고, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리
실질적으로 큰 성능을 발휘할지는 아직 의문.
하지만 IT 회사의 실질적으로 돈이 되는 것은 데이터.
즉, 지금 이 기술의 사용 경험이 미래에 회사에 들어가게 되었을 때 + 규모가 큰 프로젝트를 진행할 때 유 의미 할 것이라 예상이되며, 우리 팀의 기술 선택 모토 또한 컴포트존을 벗어나 새로운 기술을 도입해 사용해 보자는 방향과 일치.
