React Native 코드 컨벤션 가이드

React Native CLI · Tailwind (NativeWind) · Zustand

1. 프로젝트 디렉토리 구조

모든 소스 코드는 src/ 아래에 위치하며, 기능 단위(feature-based)로 폴더를 구성합니다.

src/
├── App.tsx               
├── components/
│   └── ui/               # 기본 UI 원소 (Button, Input 등)
├── screens/              # 화면 단위 컴포넌트
├── navigation/           # React Navigation 설정
├── store/                # Zustand 스토어
├── hooks/                # 커스텀 훅
├── services/             # API, 외부 서비스
├── utils/                # 순수 유틸 함수
├── types/                # 전역 TypeScript 타입 정의
├── constants/            # 상수값 (colors, sizes 등)
└── assets/               # 이미지, 폰트 등 정적 리소스

2. 네이밍 컨벤션

파일 및 폴더

항목 규칙 예시
컴포넌트 파일 PascalCase UserProfile.tsx
스크린 파일 PascalCase + Screen 접미사 HomeScreen.tsx
훅 파일 camelCase + use 접두사 useAuthStore.ts
스토어 파일 camelCase + Store 접미사 authStore.ts
유틸 파일 camelCase formatDate.ts
타입 파일 camelCase + .types 접미사 user.types.ts
폴더명 camelCase userProfile/

변수 및 함수

항목 규칙 예시
일반 변수 camelCase const userName
모듈 레벨 상수 UPPER_SNAKE_CASE const BASE_URL
함수 camelCase function fetchUserData()
컴포넌트 PascalCase function UserCard()
타입/인터페이스 PascalCase interface UserProps
Boolean 변수 is / has / can 접두사 isLoading, hasError
이벤트 핸들러 handle 접두사 handlePress, handleSubmit

3. TypeScript 컨벤션

기본 원칙