스킬 react-native-dev
📱

react-native-dev

안전 ⚙️ 외부 명령어

React Native 및 Expo 앱 개발

React Native로 모바일 앱을 개발하려면 컴포넌트, 상태 관리, 애니메이션, 배포에 관한 복잡한 선택을 탐색해야 합니다. 이 스킬은 Expo 및 React Native 프로젝트를 위한 검증된 패턴, 권장 라이브러리, 프로덕션 준비 완료 예제를 제공하는 구조화된 개발 가이드를 제공합니다.

지원: Claude Codex Code(CC)
🥉 76 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"react-native-dev" 사용 중입니다. Expo Router를 사용하여 Home, Search, Profile 탭을 가진 탭 네비게이션 레이아웃을 만드세요.

예상 결과:

  • expo-router의 Tabs 컴포넌트를 사용한 탭 레이아웃 파일(app/(tabs)/_layout.tsx)
  • Ionicons 아이콘이 포함된 세 개의 탭 화면 정의
  • 대형 제목 지원 및 스타일링된 헤더가 있는 헤더 구성
  • 개별 라우트 파일: app/(tabs)/home.tsx, app/(tabs)/search.tsx, app/(tabs)/profile.tsx

"react-native-dev" 사용 중입니다. 사용자 환경설정에 persist 미들웨어와 함께 Zustand를 사용하는 방법을 보여주세요.

예상 결과:

  • create 및 persist 미들웨어를 사용한 Zustand 스토어 정의
  • theme, language, notification 설정이 포함된 타입 안전 상태 인터페이스
  • 불필요한 리렌더링을 방지하기 위한 컴포넌트의 셀렉터 패턴 사용
  • MMKV 또는 AsyncStorage를 사용한 스토리지 백엔드 구성

보안 감사

안전
v1 • 4/16/2026

This skill is a documentation-only reference guide for React Native and Expo development. It contains 12 markdown files (SKILL.md plus 11 reference files) with code examples. All 740 static analysis findings are false positives: the scanner misidentified markdown code blocks (triple-backtick fenced examples) as executable code. Patterns flagged include shell commands in installation instructions, relative imports shown as code examples, environment variable usage in documentation, and documentation references to .env files. No executable code exists in this skill.

12
스캔된 파일
3,050
분석된 줄 수
1
발견 사항
1
총 감사 수

위험 요인

⚙️ 외부 명령어 (4)
SKILL.md:88-98 references/animations.md:14-16 references/testing.md:7-26 references/networking.md:337-344
감사자: claude

품질 점수

45
아키텍처
100
유지보수성
87
콘텐츠
50
커뮤니티
100
보안
91
사양 준수

만들 수 있는 것

새 Expo 프로젝트 시작

개발자가 적절한 프로젝트 구조, 라우팅, 상태 관리, CI/CD 파이프라인을 갖춘 프로덕션 준비 완료 React Native 앱을 스캐폴딩해야 합니다.

복잡한 애니메이션 및 제스처 구현

개발자가 Reanimated 3과 Gesture Handler를 사용하여 부드러운 애니메이션, 제스처 처리, 스크롤 기반 효과를 추가해야 합니다.

앱 성능 최적화 및 릴리스 준비

팀이 앱을 프로파일링하고 스크롤 끊김을 수정하며 번들 크기를 줄이고 EAS 빌드를 구성한 후 App Store 및 Play Store 배포를 위한 CI/CD를 설정해야 합니다.

이 프롬프트를 사용해 보세요

초급: 새 Expo 프로젝트 생성 
TypeScript를 사용하여 새 Expo 프로젝트를 설정하세요. 탭 레이아웃을 사용한 Expo Router 네비게이션, 목록을 위한 FlashList, 이미지를 위한 expo-image, 상태 관리를 위한 Zustand를 포함하세요. 권장 프로젝트 구조를 보여주세요.
초급: 로그인 폼 만들기 
React Hook Form과 Zod 유효성 검사를 사용하여 로그인 폼을 만드세요. 오류 메시지가 포함된 이메일 및 비밀번호 필드, 로딩 상태가 있는 제출 버튼, fetch 래퍼를 사용한 API 통합을 포함하세요.
중급: 애니메이션 전환 추가 
Reanimated 3을 사용하여 목록 화면과 상세 화면 사이에 공유 요소 전환을 구현하세요. 목록은 메모이제이션된 항목과 함께 FlashList를 사용합니다. 항목을 탭하면 페이드 및 스케일 전환으로 상세 화면으로 애니메이션하세요.
고급: CI/CD 파이프라인 구성 
GitHub Actions를 사용하여 EAS Build 및 Submit 파이프라인을 설정하세요. 개발용과 프로덕션용 별도 빌드 프로필, main 브랜치 병합 시 자동 앱 스토어 제출, 다양한 스테이지를 위한 환경 변수 관리를 포함하세요.

모범 사례

  • 목록에는 항상 FlatList 대신 FlashList를 사용하고, 더 나은 성능과 캐싱을 위해 RN Image 대신 expo-image를 사용하세요
  • Reanimated로 애니메이션할 때는 transform과 opacity 속성만 사용하여 애니메이션이 GPU 컴포지션을 유지하고 레이아웃 재계산을 피하도록 하세요
  • 클라이언트 측 환경 변수에는 EXPO_PUBLIC_ 접두사를 사용하고 서버 전용 비밀은 API 라우트에서 접두사 없이 유지하세요

피하기

  • 프로덕션 목록 및 이미지 갤러리에서 메모이제이션된 항목 없이 FlatList를 사용하거나 캐싱 없이 RN Image를 사용하기
  • 번들 크기를 증가시키는 배럴 파일(index.ts)에서 가져오기 - 항상 소스 모듈에서 직접 가져오기
  • process.env.EXPO_OS 대신 Platform.OS를 사용한 플랫폼 검사, React 18에서 React.use 대신 useContext 사용하기

자주 묻는 질문

언제 Expo Go를 사용하고 언제 EAS Build로 커스텀 빌드를 사용해야 하나요?
표준 Expo 모듈로 빠른 프로토타이핑 및 테스트를 하려면 Expo Go를 사용하세요. 커스텀 네이티브 모듈, 특정 네이티브 SDK 버전, Apple 타겟 또는 Expo Go에서 사용할 수 없는 서드파티 모듈이 필요한 경우 EAS Build를 사용하세요.
프로젝트에 어떤 상태 관리 라이브러리를 선택해야 하나요?
로컬 UI 상태에는 useState 또는 useReducer를 사용하세요. 컴포넌트 간 공유 애플리케이션 상태에는 Zustand 또는 Jotai를 선택하세요. 캐싱이 포함된 서버 및 비동기 데이터에는 React Query를 사용하세요. 앱이 매우 복잡한 상태 요구사항을 갖지 않은 한 Redux는 피하세요.
Expo 앱에서 환경 변수를 안전하게 처리하려면 어떻게 해야 하나요?
EXPO_PUBLIC_ 접두사가 붙은 변수는 클라이언트 번들에 포함되며 API URL과 같은 공개 구성에 안전합니다. 접두사가 없는 변수(LLM_API_KEY 등)는 서버 측 API 라우트에서만 실행되며 클라이언트에 전달되지 않습니다. 프로덕션 비밀은 CI/CD에서 eas env-create로 설정하세요.
이 스킬이 FlatList 대신 FlashList를 권장하는 이유는 무엇인가요?
Shopify의 FlashList는 뷰 재활용을 내장하여 제공하며, 이는 메모리 사용을 크게 줄이고 긴 목록에서 스크롤 끊김을 방지합니다. FlatList는 재활용 없이 모든 표시 항목을 렌더링하여 20개 이상의 목록에서 성능 문제를 유발합니다.
React Native 컴포넌트를 효과적으로 테스트하려면 어떻게 해야 하나요?
단위 및 컴포넌트 테스트에는 React Native Testing Library와 함께 Jest를 사용하세요. 구현 세부정보가 아닌 사용자 눈에 보이는 동작(텍스트 내용, 버튼 상호작용)을 테스트하세요. 엔드투엔드 테스트에는 빌드 구성이 필요하지 않고 Expo와 함께 작동하는 Maestro를 사용하세요.
확장 가능한 React Native 앱의 권장 프로젝트 구조는 무엇인가요?
코드를 다음과 같이 구성하세요: Expo Router 라우트를 위한 app/, 아토믹 컴포넌트를 위한 components/ui/, 조합 컴포넌트를 위한 components/shared/, 상태 관리를 위한 stores/, API 및 네이티브 모듈 래퍼를 위한 services/, 커스텀 훅을 위한 hooks/, 테마 값을 위한 constants/, TypeScript 정의를 위한 types/. 깨지기 쉬운 상대 import를 피하기 위해 경로 별칭을 사용하세요.

개발자 세부 정보

작성자

MiniMax-AI

라이선스

MIT

리포지토리

https://github.com/MiniMax-AI/skills/tree/main/skills/react-native-dev

참조

main

파일 구조

📁 references/

📄 animations.md

📄 components.md

📄 engineering.md

📄 forms.md

📄 native-capabilities.md

📄 navigation.md

📄 networking.md

📄 performance.md

📄 state-management.md

📄 styling.md

📄 testing.md

📄 SKILL.md