react-hook-form과 React Query를 데이터 조회용도로도 함께 쓰는 것이 과연 효율적일까요?

Question

안녕하세요.

실무에서 react-hook-form과 React Query를 함께 사용하고 있는 FE 개발자입니다.

먼저 제가 알기론 react-hook-form은 CRUD 중, C(생성)와 U(수정)를 위해 쓰는 경우, 폼 제출 시 React Query의 mutate 함수를 호출하게끔 코드를 짜는 것이 일반적인 것으로 알고 있습니다. 이 때에는 분명 validation 처리 등의 작업을 (useState, useRef와 같은 react 내장 hook 대비) 효율적으로 진행할 수 있다는 점을 충분히 이해하고 있어요.

이제 궁금한 점은 데이터를 조회하는 경우입니다. 과연 useState, useRef와 같은 react 내장 hook 대비 react-hook-form을 사용하는 것이 효율적일까요?

예컨대 키워드 검색과 페이지네이션 기능이 들어간 목록에서 데이터를 조회해오는 경우, react 내장 hook + React Query를 사용한 코드와 react-hook-form + React Query를 사용한 코드를 각각 작성해보았습니다. (아래 코드 첨부)

제가 생각한 결과는 아래와 같습니다.
1. 검색어 입력, 페이지네이션 기능 사용간 리렌더링 횟수 기준으로 성능적인 차이가 없습니다. (동일)
2. 조회 요청이므로 입력에 대한 validation 처리 코드가 필요하지 않습니다. (동일)
3. 코드량은 react-hook-form보다 react 내장 hook을 사용한 것이 더 적습니다. (react 내장 hook이 우위)

위 결과를 토대로 저는 아무리 프로젝트에서 react-hook-form을 도입했다고 하더라도 데이터를 조회해오는 상황에서는 react 내장 hook을 사용하는 것이 좀 더 가독성도 좋고 유지보수성도 높을거란 생각이 드는데요. (물론 제가 react-hook-form 코드를 효과적으로 작성하지 못했을 수도 있습니다. 혹시 그렇다면 이 부분도 지적 부탁드려요!)

여러분들의 생각은 어떠신가요?

강동희 · Accepted Answer

react-hook-form 을 사용하는 경우는 복잡한 폼에 있어서 좋은 효율을 보입니다.
예시를 들어주신 페이지네이션이나 검색을 구현하는데 있어서 react-hook-form 을 도입하는건 효율적이지 못하다고 생각하고 있습니다.
검색이나 pagination 을 위해 서버에 요청을 보낼땐 보통 query param 을 통해서 서버에 필터링을 요청을 하는데, 필터를 위해 react-hook-form 을 사용할 시 코드도 길어지고 react-hook-form 을 통해서 성능상 이점을 볼 수 있는 부분이 없다고 생각합니다.
키워드 검색을 구현하기 위해서 간단한 input 을 사용한다면 제어 컴포넌트를 활용해 구현하는게 코드적인 측면에서 이점이 있다고 생각이 듭니다.
보통 react-hook-form 을 통해서 사용자에게서 입력받은 값을 관리할때는 여러 필드를 입력받아 해당 데이터를 프론트단에서 관리하고, 서버에 Create, Update 요청을 할 때 사용하고는 합니다.

드리는 답변이 질문자님에게 와닿는 답변일지는 모르겠네요.. 아래에는 제가 react-hook-form 관련해 작성한 블로그 글 두 개를 남겨놓을게요!

https://tech.osci.kr/2023/01/09/react-hook-form-series-3/
https://tech.osci.kr/2023/01/02/introduce-react-hook-form/

손정현 · Answer

안녕하세요!

저도 validation이 필요없고, form이 복잡한 구조가 아니고, 단순 조회 용도라면 react-hook-form을 고집할 것 같지는 않습니다. 코드를 처음보는 사람 입장에서는 뭔가 괜히 더 어렵게 느껴질 것 같아요. 더 단순한 방법으로 짜는게 이해하기도 쉽고 확장하기도 쉬운것 같아요. 성능적인걸 떠나서 코드만 봤을때는 react hook(내장 훅)으로 짜는게 더 이해하기 쉬운것 같습니다.

올려주신 코드만 놓고 보면, 신입 개발자가 들어왔을때 react hook으로 되어있는 코드는 바로 이해할 가능성이 높지만 react-hook-form까지 들어간 코드를 보게되면 react-hook-form에 대해서도 공부해야하는 불필요한 허들이 생기긴할것 같아요.

react-hook-form의 장점은 복잡한 form을 다룰때 불필요한 리렌더링 방지, 입력 요소 상태 관리, 검증 및 에러 로직을 쉽게 작성/관리 할 수 있다는 점인 것 같습니다.

결론은, 성능적으로 큰 차이가 없다고해도 코드를 읽고 이해하는 관점에서 react hook을 사용하는게 더 효율적일 것 같아요 :)

커리어리 AI 봇 · Answer

React Hook Form과 React Query는 각각 폼 처리와 데이터 요청을 쉽게 다룰 수 있게 해주는 라이브러리입니다. React Hook Form은 폼 제출 시 값을 검증하고 제출하기 쉽게 해주는 동시에, React Query는 데이터 요청의 상태를 관리하고 캐시를 관리해주기 때문에 사용성이 매우 좋습니다.

그런데 React Hook Form과 React Query를 데이터 조회용도로도 함께 사용하는 것이 효율적일까요? React Hook Form은 폼 데이터를 다루는 라이브러리이기 때문에, 데이터 조회와는 별개의 역할을 하기 때문에 함께 사용할 필요는 없을 것입니다.

따라서, React Query와 React Hook Form을 함께 사용하기보다는 React Query를 사용해서 데이터를 요청하고 받은 데이터를 사용해서 폼 컴포넌트를 구성하는 것이 더욱 효율적일 것입니다.

단, 이 경우 데이터 조회와 폼 컴포넌트 간의 데이터 전달을 어떻게 할 것인가에 대한 고민이 필요합니다. 예를 들어 데이터 조회 후 받은 데이터를 폼 컴포넌트에 전달하기 위해 useState를 사용하는 방법도 있을 것입니다. 따라서, 개발자의 판단에 따라 적절한 방법을 선택하면 됩니다.