React Native는 브라우저가 없고 Bridge가 존재한다
React Native 코드를 만들면 bridge를 통해 알아서 번역해준다
(4,5 번만 사용)
event 발생 => 데이터(메시지) 생성 => Bridge를 통해 JavaScript에 메시지 전달 ⇒ 코드 실행 ⇒ 다시 Bridge를 통해 Native로 잔달
자바스크립트는 메시지를 주고 받기 위해 사용하는 레이어라고 생각하면 편하다!
- React Native 앱을 위한 프레임워크이다
- Android Studio 또는 XCode를 거치지 않고도 개발 중에 프로젝트를 실행이 가능하다
설치
npm i -g expo-cli
expo init my-app
- 로컬과 핸드폰 둘 다 로그인 해야 한다
- 로컬로 앱이 동작하기 때문에 같은 네트워크를 사용해야 한다
- 모바일에서 app을 open하면 로컬에서 반응한다
expo login
- text는 무조건 Text 컴포넌트에 들어가야 한다
<Text>짱이다!</Text>
- StyleSheet.create = object(라고 생각하자)
- 자동 완성 기능
- 꼭 써야하는 것은 아니다
- 컴포넌트에 style을 넣어줘야 한다
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>짱이다!</Text> 👈
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
text: {
fontSize: 35,
},
});
- 시계, 배터리, wifi
- 일부 컴포넌트는 화면에 표시되지 않고, ios 및 안드로이드 운영 체제와 소통하기 위한 것
- exop-status-bar의 statusBar와 react-native statusbar의 차이점 => 거의 같지만 props, method... 의 차이가 있다
- native
- expo
react-native 3.0버전까지 asyncstorage가 존재했는데, (웹으로 따지면 localstorage 같은 개념) 현재(6.8)는 없어졌다
⇒ 개발자들에게 최대한 많은 api와 컴포넌트를 제공하려고 했으나, 기능에 버그가 많고 유지관리, 업데이트 등에 어려움을 느꼈기 때문이다
⇒ 정말 중요한, 필수적인 기능만 남기려고 노력하는 중이며, 커뮤니티 패키지를 사용하라고 한다
커뮤니티 패키지를 누르면 React Native Directory로 이동하는데, third-party 패키지와 api가 있다
- 커뮤니티가 제작한 package는 많은 옵션이 있다는 장점이 있지만, 만든 사람이 바쁘면 업데이트, 버그 등이 고쳐지는데 오랜 시간이 걸린다는 단점이 있다
- expo는 이를 우려했고, 자체적으로 packages와 apis를 만들기 시작했다 ⇒ expo sdk라고 부른다
- 웹에서는 display:flex 를 해야만 하는데, flex: 1 로 사용가능하다
- 기본적으로 flex container를 가진다
- flexdirection의 기본 값은 column 이다. row로 변경하기 위해서는 명시해야한다
<View style={{ flexDirection: "row" }}>
<View style={{ backgroundColor: "tomato" }}></View>
<View style={{ backgroundColor: "teal" }}></View>
<View style={{ backgroundColor: "orange" }}></View>
</View>
- 반응형 디자인을 생각해, 너비와 높이에 기반해 레이아웃을 만들지 않는다 => 수 많은 스크린에서 동일한 사이즈를 만들어야 하기 때문에 비율만 생각하자!
- 동일한 부모 아래 있는 자식들은 비율로 크기를 설정할 수 있다(부모 크기를 지정해야한다)
<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>
- 스크롤 기능
- props를 잘 활용해야 한다
- 스크린의 크기를 알 수 있다
import { Dimensions, ScrollView, StyleSheet, Text, View } from "react-native";
const windowWidth = Dimensions.get("window").width;
console.log(windowWidth);
- 사용자의 위치와 관련된 exop api
- reverseGeocodeAsync: 위도와 경도를 주소로 변환해줌
- GeocodeAsync: 주소를 위도, 경도 숫자로 변환해줌
- 로딩 중을 나타냄