📦 React Native(Expo) 전환 시 필수/추천 라이브러리 정리

1. 기본 인프라

• expo: RN 앱 런타임/빌드 환경
• react / react-native: Expo SDK에 맞춘 버전
• typescript: 언어 지원
• zustand: 상태 관리 (웹에서 사용하던 것 유지)
• @tanstack/react-query: 서버 상태 관리 (웹에서 사용하던 것 유지)

---

2. 스타일링 & 디자인 시스템

• @shopify/restyle → 타입 안전 토큰/Variant 기반 스타일링
• (대안) gluestack-ui → 접근성 내장 UI 킷 (Aria 기반)
• react-native-svg → 아이콘/차트 그리기 필수
• react-native-vector-icons 또는 lucide-react-native → 아이콘 세트

---

3. 접근성 & 컴포넌트 로직

• @react-native-aria/* → 접근성/포커스/키보드 상호작용 프리미티브
  • button, checkbox, slider, etc. 필요에 맞게 선택

---

4. 애니메이션 & 제스처

• react-native-reanimated → 핵심 애니메이션 엔진
• react-native-gesture-handler → 제스처 처리
• moti → Reanimated 기반 선언적 애니메이션 레이어
• @gorhom/bottom-sheet → 사실상 표준 바텀시트
• @gorhom/portal → 포털 기반 모달/팝업 관리

---

5. 네트워킹 & 데이터

• axios (웹과 동일) → HTTP 클라이언트
• jwt-decode → JWT 파싱
• expo-secure-store → 토큰/민감정보 보안 저장
• expo-file-system → 파일 업/다운로드 필요 시
• qs → 쿼리스트링 처리

---

6. 리스트 & 성능

• @shopify/flash-list → 고성능 FlatList 대체
• (경량이면 RN 기본 FlatList로도 충분)

---

7. 폼/입력

• react-hook-form (이미 사용 중)
• RN에 맞는 Input 컴포넌트 + Controller 활용

---

8. 날짜/시간

• dayjs (웹과 동일)
• @react-native-community/datetimepicker → 네이티브 날짜 선택기
• react-native-calendars (필요 시 달력형 UI)

---

9. 애니메이션/미디어

• lottie-react-native → Lottie 애니메이션 (웹의 lottie-web 대체)

---

10. 유틸

• immer → 불변성 관리 (웹과 동일)
• uuid → UUID 생성 (웹과 동일)
• clsx → 조건부 className 유틸 (RN에서는 단순 조건부 props로도 대체 가능)

---

🚀 최종 권장 세트 (요약)

• 스타일/시스템: @shopify/restyle (+ Native base 컴포넌트)
• 접근성: @react-native-aria/*
• 제스처/애니메이션: react-native-reanimated, react-native-gesture-handler, moti, @gorhom/bottom-sheet
• 데이터/상태: axios, @tanstack/react-query, zustand, expo-secure-store
• 폼/입력: react-hook-form, @react-native-community/datetimepicker
• 리스트/성능: @shopify/flash-list
• 애니메이션/미디어: lottie-react-native
• 유틸: dayjs, immer, uuid, clsx

---

❌ 웹에서 쓰던 것 중 제거/교체해야 할 것

• @stackflow/* → RN에서는 React Navigation
• gsap, @react-spring/web, @use-gesture/react → Reanimated + Gesture-handler + Moti
• react-loading-skeleton → moti/skeleton 또는 react-native-skeleton-content
• react-multi-date-picker → @react-native-community/datetimepicker
• swiper → react-native-swiper 또는 react-native-swiper-flatlist
• lottie-web → lottie-react-native
• oidc-client-ts → expo-auth-session 또는 react-native-app-auth
• env-cmd, vite, sass, stylelint 등 빌드/웹 도구 → Expo/Metro 환경에 맞춰 제거