⚛️ React Native 고급 앱 개발 튜토리얼

## 학습 목표
이 튜토리얼을 통해 네비게이션, 상태 관리, API 통신 기능을 갖춘 완전한 React Native 앱을 개발하고 배포까지 진행할 수 있습니다.

## 준비사항
- Node.js(v14 이상) 설치
- Expo CLI 또는 React Native CLI 설치
- Android Studio(안드로이드 기기) 또는 Xcode(iOS 기기)
- 기본적인 JavaScript/ES6 이해
- React 개념 이해

## 단계별 진행

### 1단계: 기초 설정
React Native 프로젝트 생성 및 환경 구성
```bash
npx create-react-native-app my-app
cd my-app
npm install @react-navigation/native @react-navigation/stack
```

### 2단계: 핵심 구현
StackNavigator 설정 및 컴포넌트 연결
```javascript
// App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createStackNavigator();

export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
```

### 3단계: 고급 기능
Redux Toolkit으로 상태 관리 구현
```javascript
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

export default configureStore({
reducer: {
counter: counterReducer,
},
});
```

### 4단계: 완성 및 테스트
API 통신 추가 및 앱 배포 준비
```javascript
// services/api.js
import { fetch } from 'react-native-fetch';
export const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
return await response.json();
};
```

## 다음 학습 단계
- React Native Hooks 활용
- Native Module 개발
- Firebase 통합
- 앱 배포 및 모니터링

React Native CLI를 통해 프로젝트 생성 후, NavigationContainer와 StackNavigator를 사용해 네비게이션 구조 설계. Redux Toolkit으로 상태 관리 로직 분리, fetch API 활용한 데이터 요청 추가. Android/iOS 기기에서 테스트 및 배포 절차 수행