작심삼일 개발이야기

React Hook Form을 통해 동적으로 변하는 폼 상태를 관리하기 위해 useFieldArray를 사용하고 있었습니다. 문제없이 폼 상태를 동적으로 잘 관리한다고 생각했는데 막상 제대로 동작하지 않는 이슈를 발견했습니다. 해당 이슈를 기반으로 간단한 예시를 만들어서 설명하겠습니다. 요구 사항 1. 회원의 이름과 나이를 작성할 수 있는 폼 2. 추가 버튼 클릭 시 회원을 여러 명 등록하도록 input 요소 추가 3. 더미로 변환 버튼 클릭 시 해당 요소의 이름은 dummy로 변경, 나이는 입력 값 그대로 유지 예상 구현 방법 1. 회원의 이름과 나이를 작성할 수 있는 폼 -> input, button 요소와 React Hook Form 연동 2. 추가 버튼 클릭 시 회원을 여러 명 등록하도록 inpu..

폼을 작성할 때, 여러 가지 조건이 발생하는 경우가 있습니다. 특정 값을 선택했을 때만 입력 필드가 나타나야 하거나, 특정 값이 선택되었을 때는 필수 입력 필드가 되지만 다른 값이면 필수가 아닌 등 다양한 상황이 발생할 수 있습니다. 이런 상황에서 Yup의 when 메서드를 사용하면 원하는 조건에 따라 유효성 검사를 동적으로 설정할 수 있습니다. 공식문서의 예시코드를 가져와 when의 사용법에 대해 설명하겠습니다. when의 타입은 아래와 같이 정의되어 있습니다. Schema.when(keys: string | string[], builder: object | (values: any[], schema) => Schema): Schema when 메서드는 두 개의 매개변수를 사용하며, 첫 번째 매개변수는 ..

React Hook Form을 사용하여 폼을 만들 때, 마지막 단계로 폼의 유효성 검사를 하는 것은 중요한 과정 중 하나입니다. 이때 유효성 검사란 사용자가 입력한 데이터가 원하는 규칙에 부합하는지 확인하는 작업을 의미합니다. React Hook Form에서는 register 메서드를 사용하여 각 입력 필드에 대한 유효성 검사 규칙을 정의할 수 있습니다. 그러나 폼이 복잡해지고 유효성 검사 규칙이 많아질수록 JSX 코드는 복잡해지고 가독성이 떨어질 수 있습니다. 이런 상황에서 Yup을 사용하면 유효성 검사 규칙을 한 곳에서 효과적으로 관리할 수 있습니다. Yup은 선언적으로 유효성 검사 규칙을 정의할 수 있어 코드의 일관성을 유지하고 가독성을 향상합니다. 따라서 JSX(TSX) 코드에서는 각 입력 필드에..

폼을 작성할 때 폼 양식을 추가하거나 삭제하는 경우가 생깁니다. 예를 들어, 여러 명의 직원을 추가하거나 삭제하는 폼을 만들 때, useFieldArray를 사용하여 폼 데이터를 유연하게 관리할 수 있습니다. 이를 통해 폼의 양식을 동적으로 조작할 수 있습니다. 아래의 코드 예시를 통해, 직원의 이름과 나이를 받아 폼을 작성하고 추가, 삭제, 수정하는 방법을 확인해 보겠습니다. import { useFieldArray, useForm } from "react-hook-form"; interface Form { person: { name: string; age: string }[]; } const Page = () => { const { control, register } = useForm({ defaul..

폼을 만들 때, 다양한 입력 방식을 다루다 보면 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..

라이브러리 없이 Form을 만들고 돌아보니 코드 양이 어마어마하다... React Hook Form을 사용해서 조금 더 쉽게 Form을 만들어보고 싶어서 도전! 아직 공부하며 사용 중이라 완벽하게 마스터하지는 못했지만 아는 것만 정리해보려 한다. 설치 npm install react-hook-form 사용법 const { register, handleSubmit, watch, formState: { errors } } = useForm(); register 유효성 검사에 사용할 요소를 register를 이용해서 연결한다. register에 사용할 수 있는 유효성 검사 목록은 아래와 같다. required (필수 값) min (최소 값) max (최대 값) minLength (값의 최소 길이) maxLen..