React Native ์ฌํ ๐
1. ๋ค๋น๊ฒ์ด์
Stack Navigation
// ๊ธฐ๋ณธ ์คํ ๋ค๋น๊ฒ์ด์
์ค์
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="Details"
component={DetailsScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Tab Navigation
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
2. API ์ฐ๋
Fetch ์ฌ์ฉํ๊ธฐ
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(json => setData(json))
.catch(error => console.error(error));
}, []);
return (
<FlatList
data={data}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
);
}
Axios ์ฌ์ฉํ๊ธฐ
import axios from 'axios';
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
setData(response.data);
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);
}
3. ๋ก์ปฌ ๋ฐ์ดํฐ ์ ์ฅ
AsyncStorage
import AsyncStorage from '@react-native-async-storage/async-storage';
// ๋ฐ์ดํฐ ์ ์ฅ
const storeData = async value => {
try {
await AsyncStorage.setItem('my-key', JSON.stringify(value));
} catch (e) {
console.error(e);
}
};
// ๋ฐ์ดํฐ ๋ถ๋ฌ์ค๊ธฐ
const getData = async () => {
try {
const value = await AsyncStorage.getItem('my-key');
return value != null ? JSON.parse(value) : null;
} catch (e) {
console.error(e);
}
};
4. ํธ์ ์๋ฆผ
Expo Notifications
import * as Notifications from 'expo-notifications';
// ์๋ฆผ ๊ถํ ์์ฒญ
async function registerForPushNotifications() {
const { status } = await Notifications.requestPermissionsAsync();
if (status !== 'granted') {
alert('์๋ฆผ ๊ถํ์ด ํ์ํฉ๋๋ค!');
return;
}
const token = (await Notifications.getExpoPushTokenAsync()).data;
return token;
}
// ๋ก์ปฌ ์๋ฆผ ๋ณด๋ด๊ธฐ
async function scheduleNotification() {
await Notifications.scheduleNotificationAsync({
content: {
title: '์๋ฆผ ์ ๋ชฉ',
body: '์๋ฆผ ๋ด์ฉ์
๋๋ค.',
},
trigger: { seconds: 2 },
});
}
5. ์ฑ๋ฅ ์ต์ ํ
React.memo ์ฌ์ฉ
const MyComponent = React.memo(function MyComponent(props) {
return (
<View>
<Text>{props.text}</Text>
</View>
);
});
useCallback ํ์ฉ
function ParentComponent() {
const [count, setCount] = useState(0);
const handlePress = useCallback(() => {
setCount(c => c + 1);
}, []);
return <ChildComponent onPress={handlePress} />;
}
6. ์ฑ ๋ฐฐํฌ
Android ๋ฐฐํฌ ์ค๋น
- ์ฑ ์๋ช
ํค ์์ฑ
- build.gradle ์ค์
- ๋ฆด๋ฆฌ์ฆ ๋น๋ ์์ฑ
iOS ๋ฐฐํฌ ์ค๋น
- Apple Developer ๊ณ์ ์ค์
- ์ธ์ฆ์ ๋ฐ ํ๋ก๋น์ ๋ ํ๋กํ์ผ ์ค์
- Xcode์์ ๋น๋ ๋ฐ ์์นด์ด๋ธ
7. ํ
์คํธ
Jest ์ฌ์ฉํ๊ธฐ
import renderer from 'react-test-renderer';
test('์ปดํฌ๋ํธ ๋ ๋๋ง ํ
์คํธ', () => {
const tree = renderer.create(<MyComponent />).toJSON();
expect(tree).toMatchSnapshot();
});
8. ์ ๋๋ฉ์ด์
Animated ์ฌ์ฉ
import { Animated } from 'react-native';
function FadeInView() {
const fadeAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
}, []);
return (
<Animated.View style={{ opacity: fadeAnim }}>
<Text>ํ์ด๋์ธ ํจ๊ณผ</Text>
</Animated.View>
);
}
9. ์ํ ๊ด๋ฆฌ
Recoil ์ฌ์ฉ
import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';
// ์ํฐ ์์ฑ
const counterState = atom({
key: 'counterState',
default: 0,
});
// ์
๋ ํฐ ์์ฑ
const doubledCounterState = selector({
key: 'doubledCounterState',
get: ({ get }) => {
const count = get(counterState);
return count * 2;
},
});
function Counter() {
const [count, setCount] = useRecoilState(counterState);
const doubledCount = useRecoilValue(doubledCounterState);
return (
<View>
<Text>Count: {count}</Text>
<Text>Doubled Count: {doubledCount}</Text>
<Button
onPress={() => setCount(count + 1)}
title="Increment"
/>
</View>
);
}
function App() {
return (
<RecoilRoot>
<Counter />
</RecoilRoot>
);
}