라이브러리는 역할별로 나눠야 중복 도입과 경계 혼선을 줄인다
인증, 상태, UI, 폼, DB, 유틸리티는 서로 다른 층을 담당한다. 한 문제를 두 라이브러리가 동시에 맡지 않게 나눈다.
| 역할 | 대표 라이브러리 | 책임 | 겹치면 안 되는 부분 |
|---|---|---|---|
| 인증 | Auth.js | 로그인, 세션, provider, 보호 경계 | 클라이언트 전역 상태로 권한을 대체하지 않기 |
| 클라이언트 상태 | Zustand, Jotai | 모달, 필터, 임시 선택값 | 서버 데이터 캐시를 전역 상태로 복제하지 않기 |
| 서버 상태 | TanStack Query, SWR | fetch, cache, revalidate, mutation | DB schema 검증까지 맡기지 않기 |
| UI와 접근성 | Radix UI, shadcn/ui, Tailwind | 컴포넌트 구조, 스타일, 접근성 | 비즈니스 상태 관리까지 UI 컴포넌트에 넣지 않기 |
| 폼·검증 | React Hook Form, Zod | 입력 상태, 오류 메시지, runtime schema | 서버 권한 검사를 클라이언트 검증으로 대체하지 않기 |
| DB 접근 | Prisma, Mongoose | 모델, query, migration 또는 schema | 클라이언트 번들로 DB client를 보내지 않기 |