작심삼일 개발이야기

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

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