react-native 는 단지 개발자들을 위한 인터페이스일 뿐입니다.
IOS , Android 와 같은 운영체제를 구성하기 위해서 말입니다.
리액트 네이티브는 웹이 아니기 때문에 즉 HTML 이 아니기 때문에 Div 라는 것을 쓸 수가 없습니다.
그래서 View 라는 것을 씁니다.
그리고 항상 import { View } from “react-native” 라고 불러서 써야 합니다.
View 는 container 이며, React native 는 또 <p></p> 를 <Text></Text> 라고 씁니다.
react-native 의 기본적인 구조
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>hello chan!!</Text>
<Text style={styles.text2}>my name is chan</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 28
},
text2: {
fontSize: 14
}
});StyleSheet.create 을 사용하는 이유는 자동 완성 기능이 좋기 때문입니다.
직접적으로 styled={{}} 에 넣어줄 수 있지만 가독성도 좋지 않고
한번에 관리하기 쉽지 않기 때문에 create 를 쓰는 것을 추천합니다.
<StatusBar style="auto" />
// style = "light" 라고 설정하면 하얀색으로 나온다.StatusBar 은 상태바(시계, wifi, 배터리) 와 소통 할 수 있는 방법입니다.
Expo
Expo 는 프레임워크로써 react-native 개발을 도와주는 도구 입니다.
Expo가 나온 이유는 리액트 네이티브를 더 쉽게 사용하고 개발자 경험을 개선하기 위해서입니다.
리액트 네이티브는 모바일 앱을 개발하는 강력한 플랫폼이지만, 초기에는 설정이나 빌드 프로세스 등이 복잡할 수 있었습니다. 이로 인해 개발 속도가 느려지고, 초기 학습 곡선이 높아지는 문제가 있었습니다.
Expo는 이러한 문제를 해결하기 위해 나왔습니다.
Expo는 리액트 네이티브의 기능을 확장하고, 개발자들이 앱 개발에 집중할 수 있도록 도와줍니다.
💁 : 그럼 Expo 말고 다른 개발자가 만든 라이브러리를 사용해도 되잖아??
💁♀️ : 사용해도 돼!! 하지만 해당 라이브러리가 오류가 있을 때 해당 라이브러리의 개발자가 오류를 잡을 때 까지 기다려야 하지..
💁♀️ : 하지만 Expo 는 팀 단위로써 매일매일 오류를 해결하고 개발하기 때문에 더 좋다는 거야!!
결론을 내리고 요약하자면 React Native 팀은 React-native 서비스 제공 부분을 축소했습니다. React-native 를 빠르게 만드는 것에 집중하기 위해서죠.
그럼 개발자들은 React-native 에서 제공하지 않는 기능들을 커뮤니티에서 자체 Packages 를 만들어서 사용해야 합니다. 예를 들어 카메라 기능을 사용하는 Packages 도 만들어야 하죠. 동일한 기능을 하는 Package 가 있고 몇몇은 시간 부족으로 업데이트가 잘 안되어 있을 수도 있습니다. 또한 해당 Package 를 사용하다 오류가 발생할 수도 있죠.
그래서 Expo 는 우리에게 필요한 Packages 를 제공하기 시작했습니다.
그룹 단위로 개발하기 때문에 다른 Packages 에 비해 지원도 잘 해주고 안정적이죠.
레이아웃 잡기
react-native 에서는 display: block , display: inline-block, grid 를 지원하지 않습니다. 대신 flex 를 통해 모든 것을 해결합니다.
웹에서는 flex-direction 은 기본값이 "row" 입니다.
하지만 모바일에서는 flex-direction 의 기본값은 "column" 입니다.
예시 코드를 보자면
import { View } from 'react-native';
export default function App() {
return (
<View style={{ flexDirection: "row"}}>
<View style={{width: 100, height: 100, backgroundColor: "tomato"}}></View>
<View style={{width: 100, height: 100, backgroundColor: "teal"}}></View>
<View style={{width: 100, height: 100, backgroundColor: "orange"}}></View>
</View>
);
}이렇게 최상단 <View> 의 flexDirection 을 이용해서 flex box 를 만들 수 있습니다.
하지만 저 코드의 문제점이 있는데 바로 반응형 레이아웃이 아니라는 점입니다.
모바일은 다양한 크기를 가지고 있기 때문에 저렇게 정적으로 width, height 를 만들어 준다면 어떤 모바일 환경에서는 요소가 이상한 위치에 있거나 이상하게 나타날 수 있기 때문입니다.
따라서 모바일 환경에서는 항상 반응형 레이아웃을 생각할 필요가 있습니다.
import { View } from 'react-native';
export default function App() {
return (
<View style={{ flex: 1}}>
<View style={{flex: 1, backgroundColor: "tomato"}}></View>
<View style={{flex: 1, backgroundColor: "teal"}}></View>
<View style={{flex: 1, backgroundColor: "orange"}}></View>
</View>
);
}맛만 본 기능들
React-native 를 공부하면서 배웠던 기술들을 간략하게 넣었습니다.
ScrollView
<ScrollView
horizontal
pagingEnabled
contentContainerStyle={styles.weather}
showsHorizontalScrollIndicator={false}
>ScrollView 는 style 이 아니라 contentContainerStyle 이라고 해줘야 합니다. 그래야 스타일이 적용이 됩니다.
또한 많은 props 가 있지만 pagingEnabled 는 스크롤 할때 한 페이지씩 스크롤 되는 기능이며, horizontal 은 가로 또는 세로 방향 설정, showsHorizontalScrollIndicator 은 스크롤 할때 위치 정보를 보여주지 않게 해줍니다.
Dimensions
import { Dimensions } from 'react-native';
const { width: SCREEN_WIDTH } = Dimensions.get("window");
const styles = StyleSheet.create({
container: {
width: SCREEN_WIDTH,
},
})Dimensions 기능은 모바일 환경마다 width 가 다르기 때문에 해당 모바일 환경에 맞추어 width 를 자동 계산해주는 편리한 기능 입니다.
Location
import * as Location from 'expo-location';
const ask = async () => {
const {granted} = await Location.requestForegroundPermissionsAsync();
if(!granted) setOk(false);
const {coords: {latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy: 5});
const location = await Location.reverseGeocodeAsync({latitude, longitude}, {useGoogleMaps: false})
setCity(location[0].city);
}
useEffect(() => {
ask();
},[])해당 기능은 핸드폰을 사용하는 사용자의 위치 정보를 가져오는 기능입니다.
