React Native 실전

# React Native 실전 가이드

## 학습 목표
JavaScript로 iOS/Android 네이티브 앱을 개발합니다.

## 1. React Native란?
Facebook이 만든 크로스플랫폼 모바일 프레임워크입니다.
- JavaScript로 네이티브 앱 개발
- iOS와 Android 동시 개발
- React 문법 그대로 사용
- 핫 리로딩 지원

## 2. 프로젝트 생성
npx create-expo-app myapp
cd myapp
npx expo start

# 또는 React Native CLI
npx react-native init MyApp
cd MyApp
npx react-native run-android
npx react-native run-ios

## 3. 기본 컴포넌트
import { View, Text, Image, ScrollView, TouchableOpacity } from "react-native";

function App() {
return (
<View style={{flex: 1, padding: 20}}>
<Text style={{fontSize: 24}}>Hello</Text>
<Image source={{uri: "https://..."}} style={{width: 100, height: 100}} />
<TouchableOpacity onPress={() => alert("Clicked")}>
<Text>Press Me</Text>
</TouchableOpacity>
</View>
);
}

## 4. 스타일링
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
padding: 20,
},
title: {
fontSize: 24,
fontWeight: "bold",
color: "#333",
},
button: {
backgroundColor: "#007AFF",
padding: 15,
borderRadius: 10,
alignItems: "center",
},
});

## 5. 상태 관리
import { useState, useEffect } from "react";

function Counter() {
const [count, setCount] = useState(0);

return (
<View>
<Text>Count: {count}</Text>
<Button title="Add" onPress={() => setCount(count + 1)} />
</View>
);
}

## 6. 네비게이션
npm install @react-navigation/native @react-navigation/stack

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

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

// 이동
navigation.navigate("Detail", { id: 123 });

## 7. API 통신
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(json => {
setData(json);
setLoading(false);
});
}, []);

## 8. FlatList
import { FlatList } from "react-native";

<FlatList
data={items}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item.title}</Text>
</View>
)}
onEndReached={loadMore}
refreshing={refreshing}
onRefresh={handleRefresh}
/>

## 9. 로컬 저장
import AsyncStorage from "@react-native-async-storage/async-storage";

// 저장
await AsyncStorage.setItem("token", "abc123");

// 읽기
const token = await AsyncStorage.getItem("token");

// 삭제
await AsyncStorage.removeItem("token");

## 10. 카메라/이미지
import * as ImagePicker from "expo-image-picker";

const pickImage = async () => {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
quality: 1,
});

setImage(result.assets[0].uri);
}
};

## 11. 푸시 알림
import * as Notifications from "expo-notifications";

// 권한 요청
const { status } = await Notifications.requestPermissionsAsync();

// 토큰 가져오기
const token = await Notifications.getExpoPushTokenAsync();

// 로컬 알림
await Notifications.scheduleNotificationAsync({
content: { title: "알림", body: "메시지" },
trigger: { seconds: 5 },
});

## 12. 빌드 및 배포
# Expo
eas build --platform android
eas build --platform ios
eas submit --platform android
eas submit --platform ios

# React Native CLI
cd android && ./gradlew assembleRelease
xcodebuild -workspace ios/App.xcworkspace -scheme App

## 추천 학습 순서
1. React 기초 복습
2. 기본 컴포넌트 익히기
3. 네비게이션 구현
4. API 연동
5. 빌드 및 배포