React Native 1일차

#0.0 Requirement

필수: node.js / npm / expo
선택: Android Studio (Window,Rinux) / Xcode (macOs)

React Native의 작업 방식은 2가지가 있다.

• expo cli

• RN cli

  expo는 모든 Native 파일들을 숨기고 관리한다. RN cli방식은 Native 파일들을 더 정교하게 설정할 수 있다. 이번 수업에서는 Native 파일까지는 수정하지 않아 expo 방식으로 잔행할 예정이다.

expo 설치

• npm install -g expo-cli
• expo 앱 다운

---

#0.1 Creating the Project

1. cmd에서 프로젝트를 만들 폴더로 들어간다.
2. expo init {프로젝트 이름}
3. 이제 선택하는 창이 나오는데 초보자이므로 "blank"를 선택한다.
4. github에 repository를 새로 만들고 연결한다.
5. npm start

---

#0.2 Getting to know Expo

• 모든 디바이스가 같은 wifi에 있는지 확인해야한다.
• Android Studio는 AVD manager에서 emulator를 만들어놔야한다.
• 저장하면 바로 변경된다.
• 폰에서는 흔들면 개발자 도구가 나온다.
• 시뮬레이터에서는ctrl + M를 하면 개발자 도구가 나온다.
• npm run eject를 하게되면 모든 comfigration 파일들은 보이게 한다.
• eject를 실행하게 되면 다시 되돌릴 수 없다. expo에서 자동으로 해주던 업데이트를 나 혼자 처리해야한다.

---

#0.3 How does React Native Work?

• ios 또는 android 엔진에 js를 보내주는 브릿지같은 역할이다.
• React Native는 인스타같은 컨텐츠만 다루는 어플에 적합하다.
• 비디오 게임이나 3D증강현실같은 어플은 적합하지 않다.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>hihi</Text>//<Text>나 <View>가 브릿지 역할을 한다.
      <StatusBar style="auto" />
    </View>
  );
}
//따로 css 파일을 만들지 않는다.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});