작심삼일 개발이야기

폼을 만들 때, 다양한 입력 방식을 다루다 보면 input 뿐만 아니라 select(dropdown), calendar 등의 컴포넌트를 사용하거나, 외부 라이브러리(React-Select, AntD, MUI 등)를 통해 폼을 구성하는 경우가 있습니다. 이때 useForm의 regitser를 연결하는데 어려움을 겪는 경우가 생깁니다. 이런 상황에서 Controller를 사용하면 useForm과 해당 컴포넌트를 효과적으로 연결하여 폼 상태를 관리할 수 있습니다. 아래는 직접 만든 Dropdown 컴포넌트를 예시로 설명한 코드입니다. import { useState } from "React" interface DropdownProps { dropdowns: {key: string; label: string}[..

form의 로직을 작성할 때, 페이지 단위에서 컨테이너 단위로 쪼개 개발하다 보면, 가장 최상위에서 위치한 커스텀 훅에 존재하는 React Hook Form의 메서드들을 각 컨테이너의 props로 전달해야 할 때가 있습니다. 아래의 예시 코드를 살펴봅시다. // 여러 폼 로직을 포함한 커스텀 훅 const useCustomFormHook = () => { const { watch, register } = useForm(); return { watch, register } } // Name, Age로 이루어진 페이지 const Page = () => { const { watch, register } = useCustomFormHook(); return ( ) } const Name = ({watch, re..