React Native Skills
React Native 및 Expo 애플리케이션을 위한 포괄적인 모범 사례 모음입니다. 성능, 애니메이션, UI 패턴, 플랫폼별 최적화 등 다양한 카테고리의 규칙을 포함합니다.
적용 시점
다음 상황에서 이 가이드라인을 참조하세요:
- React Native 또는 Expo 앱을 빌드할 때
- 리스트 및 스크롤 성능을 최적화할 때
- Reanimated로 애니메이션을 구현할 때
- 이미지 및 미디어 작업을 할 때
- 네이티브 모듈이나 폰트를 구성할 때
- 네이티브 종속성을 포함한 모노레포 프로젝트를 구조화할 때
규칙 카테고리별 우선순위
| 우선순위 | 카테고리 | 영향도 | 접두사 |
|---|---|---|---|
| 1 | 리스트 성능 | 치명적 | list-performance- |
| 2 | 애니메이션 | 높음 | animation- |
| 3 | 네비게이션 | 높음 | navigation- |
| 4 | UI 패턴 | 높음 | ui- |
| 5 | 상태 관리 | 중간 | react-state- |
| 6 | 렌더링 | 중간 | rendering- |
| 7 | 모노레포 | 중간 | monorepo- |
| 8 | 설정 | 낮음 | fonts-, imports- |
빠른 참조
1. 리스트 성능 (치명적)
list-performance-virtualize- 큰 리스트에는 FlashList 사용list-performance-item-memo- 리스트 아이템 컴포넌트 메모이제이션list-performance-callbacks- 콜백 참조 안정화list-performance-inline-objects- 인라인 스타일 객체 사용 금지list-performance-function-references- 함수를 렌더 외부로 추출list-performance-images- 리스트 내 이미지 최적화list-performance-item-expensive- 비용이 큰 작업을 아이템 외부로 이동list-performance-item-types- 이종 리스트에 아이템 타입 사용
2. 애니메이션 (높음)
animation-gpu-properties- transform과 opacity만 애니메이션 대상으로 사용animation-derived-value- 계산된 애니메이션에는 useDerivedValue 사용animation-gesture-detector-press- Pressable 대신 Gesture.Tap 사용
3. 네비게이션 (높음)
navigation-native-navigators- JS 네비게이터 대신 네이티브 스택 및 네이티브 탭 사용
4. UI 패턴 (높음)
ui-expo-image- 모든 이미지에 expo-image 사용ui-image-gallery- 이미지 라이트박스에 Galeria 사용ui-pressable- TouchableOpacity 대신 Pressable 사용ui-safe-area-scroll- ScrollView에서 SafeArea 처리ui-scrollview-content-inset- 헤더에 contentInset 사용ui-menus- 네이티브 컨텍스트 메뉴 사용ui-native-modals- 가능하면 네이티브 모달 사용ui-measure-views- measure() 대신 onLayout 사용ui-styling- StyleSheet.create 또는 Nativewind 사용
5. 상태 관리 (중간)
react-state-minimize- 상태 구독 최소화react-state-dispatcher- 콜백에 디스패처 패턴 사용react-state-fallback- 첫 번째 렌더 시 폴백 표시react-compiler-destructure-functions- React Compiler를 위한 구조 분해 할당react-compiler-reanimated-shared-values- 컴파일러와 함께 공유 값 처리
6. 렌더링 (중간)
rendering-text-in-text-component- 텍스트를 Text 컴포넌트로 감싸기rendering-no-falsy-and- 조건부 렌더링 시 falsy && 사용 금지
7. 모노레포 (중간)
monorepo-native-deps-in-app- 네이티브 종속성을 앱 패키지에 유지monorepo-single-dependency-versions- 패키지 간 단일 버전 사용
8. 설정 (낮음)
fonts-config-plugin- 사용자 정의 폰트에 설정 플러그인 사용imports-design-system-folder- 디자인 시스템 임포트 구성js-hoist-intl- Intl 객체 생성 호이스팅
사용 방법
개별 규칙 파일에서 자세한 설명과 코드 예제를 확인하세요:
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
각 규칙 파일에는 다음이 포함됩니다:
- 규칙이 중요한 이유에 대한 간단한 설명
- 잘못된 코드 예제와 설명
- 올바른 코드 예제와 설명
- 추가 컨텍스트 및 참고 자료
전체 컴파일 문서
모든 규칙이 확장된 전체 가이드는 AGENTS.md 파일을 참조하세요.