form 관련 라이브러리중 zod를 사용하고 있는데, zod에서는 File관련 스키마 형식과 타입이 존재하지 않는다고 한다.
그래서, zod를 사용하여 validation을 할 때 우회해서 하는데 zod의 property중
instanceof와 File 타입을 섞어서 유효성 검사를 진행하거나, 등등 한다.
const SingleFile = z.object({ file: z.instanceof(File) | z.instanceof(FileList) // 입맛대로 }) // single File
const MultipleFiles = z.object( { fileArray:z.array(z.instanceof(File)) } ) // multiple File내가 맡은 기능 구현중 펫 등록(Form)이 있기에 스키마를 짜보았다.
export const petRegistFormSchema = z.object({
file: z.instanceof(File).nullable(), // 반려동물 이미지 , type : File | null
name: z.string(), // 반려동물 이름
age: z.string(), // 반려동물 나이
breed: z.string(), // 종류
gender: z.enum(['수컷', '암컷', '중성']), // input radio를 스키마 정의하고 싶다면 enum 사용
birth: z.date(),
});
export type T_PetRegistSchema = z.infer<typeof petRegistFormSchema>;
// 타입을 살펴보면
type T_PetRegistSchema = {
name: string;
file: File | null;
age: string;
breed: string;
gender: "수컷" | "암컷" | "중성";
birth: Date;
}펫 등록관련 Form관련 스키마의 유형은 6종류이다.
각 스키마와 관련된 UI를 작성하는데 70줄이하로 컨벤션을 따르기로 해서 CustomInput, CustomRadio, CustomCalendar로 ShadCn UI를 커스텀 했다.
그러나 File같은 경우, 불편함과 그에 따른 문제점에 직면했다.
공통으로 사용하려면 react-hook-form,zod,shadCn을 사용하지 않고 만들수 있겠으나, 우리가 처음 사용하는 각 라이브러리의 용법과 일관되지 않아 DX저하가 된다는 불편함이 생기게 된다.
// 라이브러리를 통한 일관된 사용법
<Input {...register} />
// 갑작스러운 file input의 사용법만 다른 case가 생겨난다.
<Input type='file' onChange={handlerChangePreviewImage} />이로 인해 다른 개발자는 내가 만든 fileComponent에 대해 물어보고 알아가는 시간이 필요해진다.
-
custom file Component를 만들어도 zod,react-hook-form으로 form을 만들고 있는데, 여기에 상태값 적용은??
상태값 적용은 어떻게 할 것이며, 통일된 form 형식과 validation이 이루어질지 미비하다. 뿐만 아닌 state값을 새로 생성해야 하는 불편함도 예상된다. -
비제어컴포넌트와 제어컴포넌트를 사용해서 form을 디자인, 기능구현을 하는데, 어떻게 같이 적용할 것인가...
내가 만든 것이기에 디자인, 기능 적용이 된다 하더라도, 다른 개발자가 사용할 때는 어떻게 될지 모른다. "따로 기능구현(file처리)을 하거나 할 수도 있다."
내가 생각하는 불편함과 그에따른 문제점을 개선하기 위해서 나아가야 할 방향성을
끄적끄적 개발자님의 블로그 에서 발췌하였는데
React Hook Form에서의 Controller 함수와 Register 함수 중에서 선택해야 할 때, 대부분의 상황에서는 Controller 함수를 사용하는 것이 권장됩니다. 여러 이유로 인해 Controller 함수가 프로젝트의 일관성, 확장성, 그리고 협업 측면에서 더 많은 이점을 제공하기 때문입니다.
1. 일관성과 코드 통일화
- Controller 함수를 통일적으로 사용함으로써 프로젝트 내에서 코드 일관성을 유지할 수 있습니다. 개발자들이 동일한 방법으로 코드를 작성하면서 협업이 더 원활해집니다. 특히 프로젝트 내에서 외부 라이브러리와의 통합이 필요한 경우, Controller 함수는 일관된 패턴으로 코드를 작성할 수 있게 도와줍니다.
- 외부 라이브러리와의 통합
- Controller 함수는 외부 라이브러리와의 연동에 용이합니다. 외부 라이브러리를 자주 활용하는 프로젝트에서는 Controller 함수를 통해 간단하게 폼 상태를 관리하면서 외부 라이브러리와의 통합을 쉽게 할 수 있습니다.
- 커스텀 컴포넌트와의 모듈화
- Controller 함수를 사용하면 커스텀 컴포넌트와의 상태 관리가 용이해집니다. 커스텀 컴포넌트를 활용하는 상황에서는 Controller 함수를 통해 상태를 전달하고 관리하는 것이 코드의 모듈화와 재사용성을 높일 수 있습니다.
- 프로젝트의 확장성
- 프로젝트의 규모가 커지거나 더 복잡한 상태 관리가 필요한 경우, Controller 함수는 더 많은 확장성을 제공합니다. 폼이나 상태 관리가 더 복잡해질 경우, Controller 함수를 사용하는 것이 미래에 대비하는데 도움이 됩니다.
라고 이야기 하고 있다.
따라서 ShadCn과 react-hook-form을 벤치 마킹하여 Controller와 같은 비제어형과 제어형 컴포넌트를 같이 사용 할 수 있는 FileController를 만들어 보기로 결정 하였다.
