데브허브 | DEVHUB | How To Use Shadcn’s NEW Field Component Like a Senior DevHow To Use Shadcn’s NEW Field Component Like a Senior Dev
- Shadcn의 기존
Form 컴포넌트가 폐기되고, 라이브러리 독립적인 새로운 Field 컴포넌트로 대체되었습니다. 🔄
- 이
Field 컴포넌트는 React Hook Form 및 Tanstack Form과 같은 다양한 폼 라이브러리와 쉽게 통합될 수 있도록 설계되었습니다. 🧩
- 목표는 지저분한 상용구 코드를 줄이고, 재사용 가능하며 유지보수하기 쉬운 간결한 폼 코드를 작성하는 것입니다. ✨
- 텍스트 상자, 선택 요소, 체크박스 그룹, 동적 배열 필드 등 다양한 폼 요소를 지원하며, 강력한 오류 메시지 처리 기능을 제공합니다. 🏗️
- ZOD를 활용한 스키마 유효성 검사와 Next.js 서버 액션을 통한 폼 제출 처리를 시연합니다. 🛡️
- 핵심 구성 요소는
FieldGroup (요소 간 간격), Field (레이블, 입력, 오류를 감싸는 래퍼), FieldLabel, Input (또는 사용자 정의 컴포넌트), FieldError입니다. 🧱
- React Hook Form의
Controller를 사용하여 Field 컴포넌트를 폼 상태에 연결하며, render 속성을 통해 field 및 fieldState 객체에 접근하여 동적인 동작을 구현합니다. 🔗
data-invalid 속성을 통해 필드의 유효성 상태에 따른 시각적 스타일을 적용하고, htmlFor와 id를 사용하여 레이블과 입력 필드의 접근성을 높입니다. 🎨field 객체에서 제공하는 name, onChange, onBlur, value, ref, 등의 속성을 입력 필드에 전달하여 폼 상태와 동기화합니다. 📡
disabled
aria-invalid 속성을 사용하여 입력 필드의 유효성 상태를 보조 기술에 알리고 시각적 피드백을 제공합니다. 🗣️fieldState.invalid와 fieldState.error를 활용하여 유효하지 않은 경우에만 오류 메시지를 표시하며, 폼 제출 성공 시 form.reset()으로 폼을 초기화합니다. ✅선택적 description 필드를 추가하고 ZOD의 transform 기능을 사용하여 빈 문자열을 undefined로 변환하는 고급 유효성 검사 패턴을 보여줍니다. 📝
