React Native 스킬
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에서 안전 영역 처리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- Compiler와 공유 값 처리
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를 참조하세요.