React Native ์์ํ๊ธฐ ๐ฑ
๋ชฉ์ฐจ
- React Native ์๊ฐ
- ๊ฐ๋ฐ ํ๊ฒฝ ์ค์
- ๊ธฐ๋ณธ ์ปดํฌ๋ํธ
- ๊ธฐ๋ณธ ๊ธฐ๋ฅ ๊ตฌํ
- ์ค์ต ์์
- ๋ค์ ํ์ต ์ฃผ์
ํ์ต ํ ๐ก
- ๊ณต์ ๋ฌธ์๋ฅผ ์์ฃผ ์ฐธ๊ณ ํ์ธ์
- Expo Snack์ผ๋ก ์ฝ๋๋ฅผ ์คํํด๋ณด์ธ์
- ์์ ํ๋ก์ ํธ๋ถํฐ ์์ํ์ธ์
- ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ์ค๊ณํ์ธ์
- ์คํ์ผ๋ง์ ์๊ฐ์ ํฌ์ํ์ธ์
1. React Native๋?
React Native๋ ํ์ด์ค๋ถ์ด ๊ฐ๋ฐํ ๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ ํ๋ ์์ํฌ์ ๋๋ค. React์ ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ iOS์ Android ์ฑ์ ๋์์ ๊ฐ๋ฐํ ์ ์์ต๋๋ค.
์ฅ์
- ํ๋์ ์ฝ๋๋ก iOS/Android ๊ฐ๋ฐ ๊ฐ๋ฅ
- JavaScript/React ์ง์ ํ์ฉ ๊ฐ๋ฅ
- ๋น ๋ฅธ ๊ฐ๋ฐ ์๋์ ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ (Hot Reload)
- ๋ค์ดํฐ๋ธ ์ฑ๋ฅ ์ ๊ณต
React vs React Native
// React (์น)
<div>
<h1>์๋
ํ์ธ์</h1>
<p>ํ์ํฉ๋๋ค</p>
</div>
// React Native (๋ชจ๋ฐ์ผ)
<View>
<Text>์๋
ํ์ธ์</Text>
<Text>ํ์ํฉ๋๋ค</Text>
</View>
2. ๊ฐ๋ฐ ํ๊ฒฝ ์ค์
ํ์ ์ค์น ํญ๋ชฉ
- Node.js
- npm ๋๋ yarn
- Expo CLI ๋๋ React Native CLI
- Android Studio (์๋๋ก์ด๋ ๊ฐ๋ฐ์)
- Xcode (iOS ๊ฐ๋ฐ์, Mac ํ์)
Expo CLI๋ก ์์ํ๊ธฐ
# Expo CLI ์ค์น
npm install -g expo-cli
# ํ๋ก์ ํธ ์์ฑ
expo init MyFirstApp
# ํ๋ก์ ํธ ์คํ
cd MyFirstApp
npm start
3. ๊ธฐ๋ณธ ์ปดํฌ๋ํธ
์ฃผ์ ์ปดํฌ๋ํธ
- View: ๋ ์ด์์์ ๊ตฌ์ฑํ๋ ์ปจํ ์ด๋
- Text: ํ ์คํธ ํ์
- Image: ์ด๋ฏธ์ง ํ์
- ScrollView: ์คํฌ๋กค ๊ฐ๋ฅํ ์์ญ
- TextInput: ์ ๋ ฅ ํ๋
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
function App() {
return (
<View style={{ flex: 1, padding: 20 }}>
{/* ํ
์คํธ ํ์ */}
<Text>์๋
ํ์ธ์!</Text>
{/* ์ด๋ฏธ์ง ํ์ */}
<Image
source={require('./assets/icon.png')}
style={{ width: 100, height: 100 }}
/>
{/* ์
๋ ฅ ํ๋ */}
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
placeholder="์ฌ๊ธฐ์ ์
๋ ฅํ์ธ์"
/>
{/* ์คํฌ๋กค ๊ฐ๋ฅํ ์์ญ */}
<ScrollView>
<Text>์คํฌ๋กค ๋ด์ฉ...</Text>
</ScrollView>
</View>
);
}
๊ธฐ๋ณธ ์คํ์ผ๋ง
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 20,
color: 'blue',
marginBottom: 10,
},
});
function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>์คํ์ผ ์์</Text>
</View>
);
}
4. ๊ธฐ๋ณธ ๊ธฐ๋ฅ ๊ตฌํ
์ปดํฌ๋ํธ : https://reactnative.dev/docs/components-and-apis
๋ฒํผ๊ณผ ํฐ์น ์ด๋ฒคํธ
import { TouchableOpacity, Alert } from 'react-native';
function MyButton() {
return (
<TouchableOpacity
style={{ padding: 10, backgroundColor: 'blue' }}
onPress={() => Alert.alert('๋ฒํผ์ด ๋๋ ธ์ต๋๋ค!')}
>
<Text style={{ color: 'white' }}>๋๋ฌ๋ณด์ธ์</Text>
</TouchableOpacity>
);
}
์ํ ๊ด๋ฆฌ
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<View>
<Text>์นด์ดํธ: {count}</Text>
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>์ฆ๊ฐ</Text>
</TouchableOpacity>
</View>
);
}
5. ์ค์ต ์์ : ๊ฐ๋จํ ํ ์ผ ๋ชฉ๋ก ์ฑ
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
export default function TodoApp() {
const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]);
const addTask = () => {
if (task.trim().length > 0) {
setTasks([...tasks, { id: Math.random().toString(), text: task }]);
setTask('');
}
};
return (
<View style={styles.container}>
<Text style={styles.title}>ํ ์ผ ๋ชฉ๋ก</Text>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
value={task}
onChangeText={setTask}
placeholder="ํ ์ผ์ ์
๋ ฅํ์ธ์"
/>
<TouchableOpacity
style={styles.addButton}
onPress={addTask}
>
<Text style={styles.buttonText}>์ถ๊ฐ</Text>
</TouchableOpacity>
</View>
<FlatList
data={tasks}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View style={styles.task}>
<Text>{item.text}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#fff',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
inputContainer: {
flexDirection: 'row',
marginBottom: 20,
},
input: {
flex: 1,
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
marginRight: 10,
borderRadius: 5,
},
addButton: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 5,
justifyContent: 'center',
},
buttonText: {
color: 'white',
},
task: {
padding: 15,
borderBottomWidth: 1,
borderColor: '#ddd',
},
});
'Front > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React Native ์ฌํ (1) | 2024.11.02 |
---|---|
React Recoil ๋ก todolist ์ ์ํ๊ธฐ (1) | 2024.11.02 |
์กฐ๊ฑด๋ถ ๋ ๋๋ง (Conditional Rendering) - React ๋ฐฐ์ฐ๊ธฐ (0) | 2024.11.02 |
React์ ํต์ฌ ๊ฐ๋ (1) | 2024.10.27 |
Rudux๋ก ์ ์ญ ์ํ ๊ด๋ฆฌํ๊ธฐ (0) | 2024.05.04 |