[React Native] ① React Native 설치 (feat. expo)

 

 

개요

 

핸드폰으로 사용하는 어플리케이션은 개발적인 측면에서 3가지로 나눌 수 있다.

 

Native App, hybrid App, Web App이 그것이다.

 

성능적인 측면에서는 Native App을 따라올 것이 없다. 하지만 각 OS에 맞는 언어를 배워야한다.

 

특히나 IOS는 집에 사과농장을 차리지 않아 익숙하지 않은 개발자라면 더더욱 고난이도의 앱 개발이 될 것이다.

 

그래서 나온 것이 hybrid App이다.

 

한가지 방법으로 두가지 OS를 모두 개발할 수 있는 플랫폼으로 개발한 앱을 말한다.

 

그 중 오늘 다뤄 볼 아이는 React Native(이하 RN)이다.

 

문법이 React와 매우 흡사하고 자바스크립트나 타입스크립트를 어느정도 아는 사람이라면 러닝커브가 그렇게

 

높지 않다.

 

 

 

 

Expo

 

 

RN을 말한다면서 갑자기 왠 Expo인가 싶을 것이다.

 

나같은 B급 개발자에게 무지하게 필요한 아이다.

 

React로 따지면 create-react-app과 같은 것이다. 복잡한 세팅을 한방에 해주는 고마운 아이다.

 

또한 개발에 있어 많은 편의성을 제공한다.

 

특히 IOS 앱을 한번이라도 빌드해본 사람이라면 그 거지같음을 잘 알고 있을 것이다.

 

인증서와 프로비저닝 세팅의 맛을....

 

Expo를 사용하면 핸드폰에 Expo앱을 깔고 바로 빌드해서 테스트를 해볼 수 있다.

 

무려 IOS도 말이다.

 

정말이지 엄청난 Tool이다.

 

 

- Expo 설치

 

npm install -g expo-cli

 

expo를 command로 실행할 수 있게 되었다.

 

이제 본격적으로 RN 앱을 만들어 보자

 

 

 

- 프로젝트 생성

expo init rnbase

위 명령어를 수행하면 Choose a template 라며 선택사항을 고르는게 나온다.

 

난 요즘 핫한 타입스크립트로 세팅하기 위해 blank (TypesScript)를 선택했다.

 

 

조금 기다리면 세팅이 완료된다.

 

 

VSCode로 프로젝트를 열어보면 위와 같은 구조가 나온다.

 

이제 앱이 잘 동작하는지 실행해보자

 

 

npm을 통해 실행하면 다음과 같은 명령들이 실행되고

 

 

브라우저에 해당 주소를 치면 위와 같이 개발 툴이 실행된다.

 

빨간 부분 중 원하는 것을 누르면 원하는 방법으로 앱을 실행해 볼 수 있다.

 

 

그리고 아래 QR을 Expo앱에서 찍으면 핸드폰에서 바로 디버깅이 가능하다.

 

여기서는 가볍게 확인을 위해 Run in Web browser를 눌러 브라우저에서 확인해 보겠다.

 

 

 

 

브라우저에서 개발자 모드 F12를 누르면 빨간색 부분처럼 버튼이 보일 것이다. 이것을 누르면

 

모바일 화면처럼 확인이 가능하다.

 

 

App.tsx 모듈을 열어 보자

 

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

 

이 부분에 <Text></Text> 태그 안의 글씨를 바꿔 보자

 

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello React Native!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

 

 

위와 같이 변경 사항이 바로 적용되는 것을 볼 수 있다.

 

 

다음 포스팅에서는 프로젝트 구조를 잡아보고 React에서도 중요한 페이지 이동에 쓰이는 Navigation 세팅을 해보겠다.