매번 폼form관리를 할 때 마다 항상 딜레마에 가깝다.
두 방법을 고민하게 되는 가장 큰 차이는 React의 관점에서 비제어로 관리되는 것이 좋을지, 제어로 관리되는 것이 좋을지에 대한 것이라 생각한다. 여기서 NEXT.js의 서버사이드까지 생각하면 매우 복잡해진다. 제어를 쓸까? 비제어를 쓸까? 도대체 어떻게 관리해야 좋을까?
폼을 직접 관리하는 것은 꽤나 까다로운 로직 설립이라는 결론에 다다른다. 직접 구현하여 사용하는 것이 믿을만하다면, 그것도 좋다. 하지만 요즘은 꽤 믿을만한 라이브러리가 많지 않나. 특히 시간이 없다면 검토해볼만하다.
리액트 입장에서는 제어컴포넌트가 좋다. 그러나 만약 입력과 관계없이, 제출 후에 유저에게 안내만 줄 것이라면 불(입력에 의한 상태 업데이트가 불 필요한 리렌더링을 유발하기 때문에) 굳이 제어컴포넌트를 사용할 이유가 없다. 하지만 요즘의 어플리케이션은 대부분 입력 중에 값의 유효성에 대한 정보를 유저에게 알리고 싶어하므로 대부분은 제어 컴포넌트로 관리하게 된다고 생각한다.
react-hook-form은 비제어 컴포넌트 기반이면서도 폼 관련한 라이브러리로 저명하게 자리잡았다.비제어 컴포넌트는 불필요한 리렌더링을 줄이고 성능을 최적화 할 수 있다는 장점이 있지만, 결국 리액트는 이 상태의 변화를 감지하지 못하여 개별적인 렌더링 관리 로직이 필요하다. 이를 적절히 잘 제공하는 라이브러리다. 특히, 다른 라이브러리에 의존성이 없어 장점이 있다.
Formik이라는 라이브러리도 존재한다. 이는 react-hook-form 이전에 널리 쓰여 온 라이브러리이다. 이는 제어컴포넌트로, 폼 상태 변경 시 전체 폼이 리렌더링 될 가능성이 높다. 하지만 훅 기반/선언적 컴포넌트 조합으로 복잡한 폼, 동적인 필드가 내려오는 폼을 다룰 때에 유용하게 사용된다. 또한 대규모 프로젝트에 오랫동안 사용 되어 왔던 것으로 확인 되므로 안전성이 중요하고, 커뮤니티 지원이 중요한 경우에 도입된다.