231231_TIL : react-native 시작하기

1. expo 설치

- 리액트 네이티브를 사용하기 위해서는 java, Xcode, 안드로이드 스튜디오 등의 설치가 필요한데 이것들을 각각 설치하려면 굉장히 번거롭다.

- 그래서 expo라는 플랫폼(빌드도구)을 이용하면 자바스크립트와 스타일 코드만 작성하여 실행 시킬 수 있다.

- 기존 리액트 웹사이트는 자바스크립트로 작성되고 브라우저가 이 자바스크립트 코드를 실행시킨다. 하지만 리액트 네이티브는 운영체제와 연결하는 역할을 하며, 운영체제 코드로 번역을 한다.

- expo는 컴파일해서 앱을 만드는 것이 아니다. 리액트 네이티브 코드를 폰으로 전송시켜주고, 그 코드를 바로 실행시켜 미리보기 할 수 있다.

- expo를 설치하기 위해서는 node가 설치되어 있어야 한다.

// 1. expo 설치
// 윈도우는 이렇게만 하면 설치 끝이지만 맥은 watchman을 추가로 설치해야 한다
npm install --global expo-cli

// 2. 핸드폰에서 expo 어플 다운로드(iOS에서는 expo go)한 후 expo계정 만들고 로그인

// 3. 프로젝트 생성(expo init 앱이름 이걸로도 가능)
npx create-expo-app 앱이름

// 4.vscode로 프로젝트 열기
cd 앱이름
code .

// 5.실행 : 어플에서 프로젝트 확인(같은 와이파이를 사용하고 있어야한다)
npm start

 

- 기존에는 npm start를 실행하면 웹으로 앱 화면을 볼수있는 브라우저가 열리지만 22년 7월에 업데이트 되면서 이 웹 UI가 삭제되었다. 웹 UI를 포함하는 마지막 릴리스는 expo-cli@5.5.1

 

 

2. 리액트 네이티브의 규칙

1) 웹사이트가 아니라 html 사용할 수 없다. <div> 대신 <View> 사용.

- view는 container

 

2) <p> 대신 <Text> 사용

- text가 아니라 view를 사용하면 에러발생

- view, text 등은 항상 리액트네이티브에서 import 해야한다

 

3) 스타일

- 함수 아래 스타일 변수를 만들고 여기에 스타일을 작성한다.

- create는 object를 생성하는 것이고, 스타일 속성을 자동완성 시켜준다.

- 웹에서 가져올 수 없는 css 속성이 있다(border)

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{
        fontSize: 28}}>
        hello! 리액트 네이트브입니다람쥐</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

 

4) StatusBar

- 상단의 시계, 배터리, 와이파이 등을 표시하는 부분으로 운영체제와 소통하는 컴포넌트.

- text 아래에 작성했다고, 그 밑에 렌더링되는 것이 아니고 상단에 표시된다.

- style로 색상을 변경할 수 있다.