shadcn/ui, Zod, React Hook Form

shadcn/ui, Zod, React Hook Form를 활용해 완성해야 하는 회원가입, 로그인 페이지

✅ shadcn/ui

shadcn/ui 라이브러리는 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트로 Next.js에서 컴포넌트의 호환성이 좋으며,앱에 복사하여 붙여넣을 수 있는 재사용 가능한 컴포넌트 모음. (컴포넌트 자체를 패키지 install 하는 방식의 UI 컴포넌트의 모음)

shadcn/ui

[참조영상] Build a Reusable Component in React (Shadcn/ui, Tailwind)

 

✅ Zod

Zod 는 schema validation(스키마 선언 및 유효성 검사 라이브러리)에 유용한 라이브러리

GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

 ⛔ Zod를 사용하는 이유는 TypeScript의 한계 때문

1. TypeScript는 컴파일 시점에서의 타입에러만 잡아낼 수 있고 런타임 단계에서의 타입 에러는 작동하지 않는다. 왜냐면 런타임 단계에서 작동되는 것은 JavaScript이기 때문.

 

2. TypeScript는 원하는 문자열이나 원하는 숫자 범위를 강제하거나 number타입의 정수/실수 구분은 불가능

 

✅ React Hook Form

react-hook-form은 React 기반의 폼 관리 라이브러리

React Hook Form - performant, flexible and extensible form library

복잡한 폼을 간단하게 처리하고 상태 관리를 용이하게 해주는 도구.

사용자 인터페이스(UI)를 빠르게 개발하고 유지 관리할 수 있도록 도와줌.

[참조영상] React Hook Form - Complete Tutorial (with Zod)