개발자
안녕하세요 현재 진행하는 프로젝트에서 form을 recoil로 관리하고있습니다. 이유는 form과 화면구성이 너무 복잡한 형태라 props drilling도 심하고 (부모에서 자식까지 5~7 depth) 관리해야하는 데이터가 많아 store에서 관리하고있습니다. react-hook-form이 복잡한 form에서 효율을 낸다고 해서 마이그레이션 해볼까 생각중인데 궁금점이 있어 작성합니다 ! 1. 이렇게 전역적으로 관리를 해야하는 복잡한 form에서도 좋은 효율을 내고 전역 상태관리 라이브러리보다 좋은 방향일까요?! (FormProvider 를 사용) 2. form에서는 input 필드만이 아닌, tab클릭, 드랍다운 클릭, 체크박스 클릭, 이미지 업로드, 라디오 클릭 등등 이러한 경우가 많은데 react-hook-form 을 사용해도 좋은 방향인가요?! 어떨때 react-hook-form을 사용하면 좋은지 궁금합니다 !
답변 1
1.폼이라는 기능을 추출하여 따로 관리하는 것을 통해 스토어의 롤을 명확하게 하는 효과를 기대할 수는 있을듯합니다. tanstack query를 통해 async 상태들을 기존 스토어에서 추출해낸 것처럼 생각하시면 될 것 같습니다 2. 리액트훅폼에서는 전통적인 인풋이 아닌 버튼 , 인터랙션 UI와의 통합을 위해 컴포넌트를 지원하고 있습니다. api문서를 확인해보시기 바랍니다. 리액트훅폼은 복잡해지기 쉬운 폼 상태관리를 선언적으로 관리할수 있도록 도와주는 역할을 수행하기도하며 각 인풋들의 렌더링을 격리시켜 렌더링 최적화를 수행해주기도 합니다. 사용자가 제출한 내용이 유효한지 검사하고 , 유효하지않은 값을 제출했다면 어떤 값이 어떤 방식으로 유효하지않은지에 대해 경고 메시지를 띄워주고 UI로도 유효하지않다는 것을 표시해주어야하는 등의 요구사항들을 구현하다보면 코드가 복잡해지기 쉽습니다. 이런 부분의 페인포인트를 해결해주기도하고 zod 등의 스키마라이브러리와의 통합도 잘되어있다보니 밸리데이션 , 트랜스폼 측면에서도 유연하게 사용할 수 있습니다
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 04월 10일
React Hook Form은 폼 상태 관리에 있어서 효율적인 라이브러리입니다. 너의 질문에 답변해보겠습니다. 1. 만약 폼과 관련된 데이터가 전역 범위에서 사용될 필요가 없다면, React Hook Form을 사용하는 것이 좋습니다. 이는 코드 간결성, 가독성, 그리고 성능 측면에서 장점이 있습니다. `FormProvider`를 사용하면 context를 통해 여러 컴포넌트 간에 폼의 상태를 공유할 수 있습니다. 그러나 만약 네가 광범위하게 상태를 공유해야 하거나, 복잡한 상호작용과 반응형 업데이트가 필요하다면 Recoil처럼 한 단계 업그레이드된 상태 관리 도구를 고려해 보세요. 2. 네! React Hook Form은 다양한 유형의 입력 필드를 처리하는데 문제 없습니다. 이미지 업로드와 같은 비동기 작업도 처리할 수 있다는 점에서 매우 유연합니다. React Hook Form을 사용하기 좋은 시기는 기본 HTML form 요소만으로는 원하는 기능을 구현하기 어려울 때나, form validation 로직 이상의 복잡함이 추가되는 경우입니다. 예를 들어, form 상태를 컴포넌트 간에 공유해야 하거나, 입력 필드가 동적으로 추가/제거될 수 있는 경우, React Hook Form은 이러한 복잡함을 관리하는 데 큰 도움이 됩니다. 그러므로 너의 프로젝트에서 폼 작업이 중요한 부분을 차지한다면 사용을 고려해 보시는 것도 좋습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!