설명
shadcn/ui component 들 과 react-hook-form 들의 기능을 활용해 구성된 form 형식의 컴포넌트
기능 및 장점
FormField를 통해 form field 를 제어zod를 사용해 form 데이터 유효성 검사- 접근성 및 오류 메시지를 핸들링 가능
- React.useId() 를 사용하여 고유 id 활용
- 적절한 aria 속성 적용
- 다른 스키마 라이브러리와도 사용 가능
- 스타일과 마크업 커스텀이 자유로움
기본적인 Form component 구조
<Form>
<FormField
control={...}
name="..."
render={() => (
<FormItem>
{ /* 실제 form field ㅣlabel */}
<FormLabel />
<FormControl>
{ /* 실제 form field 요소 */}
</FormControl>
{ /* form field 설명 */}
<FormDescription />
{ /* form field 오류 메시지 */}
<FormMessage />
</FormItem>
)}
/>
</Form>각 요소별 디테일
FormItem, FormField, FormLabel, FormControl, FormDescription, FormMessage 등등 기본적으로 제공하는 요소들은 react-hook-form 에서 제공하는 useFormContext 및 기타 context 등을 통해 여러 form 정보에 연결되어 있어 각 요소에서 필요한 데이터들을 활용해 유연하게 사용 가능
- Form : react-hook-form 의 Provider 로 하위 form 요소들에서 useFormContext 로 form 정보에 접근 가능
FormField: react-hook-form 의Controller에 사용하여 form field 제어FormItem:FormLabel,FormControl,FormDescription,FormMessage들을 감싸며 공통된 id 를 가지고 있어 각 요소들의id의 기준점이 되고FormLabel,FormControl연결에 사용FormLabel: label 용도로 사용FormControl: form field 용도를 감싸 제어 하는용도로 사용FormDescription: form field 설명 용도로 사용FormMessage: 현재 form의 에러 발생 시 그 에러 내용을 노출하는 용도로 사용