리엑트 네이티브 장단점, Expo를 사용한 세팅 방법
Post

리엑트 네이티브 장단점, Expo를 사용한 세팅 방법

28/04/2022 01/05/2022
Da-Bin Jeong
5

React Native를 사용하는 이유

React Native의 장점

  • React의 지식을 가지고 웹이 아닌 앱을 만들 수 있다.
  • 안드로이드, IOS앱을 한 번에 만들 수 있다.
  • 네이티브앱 지식이 없어도 만들 수 있다.
  • CodePush를 이용해서 심사없이 간단한 업데이트가 가능하다
    • JS 코드, assets 요소를 업데이트할 수 있다.
  • JavaScript를 사용한다. (웹개발자 커리어를 밟은 사람에게 장점)
  • TypeScript도 사용한다. (JavaScript 장점 확장판)

React Native의 단점

  • 네이티브 앱보다 성능이 떨어질 수 밖에 없다.
  • 일부 네이티브 기능은 구현이 어려울 수 있다.
  • 플러터와 비교했을 때 스타일시트 언어까지 학습해야 해서 웹개발 지식이 부족한 경우 러닝커브가 높아질 수 있다.

장단점을 정리하며

  • 아직 직접 사용해보지 않았기 때문에 이외에도 장단점이 있을 거라고 생각하는데,법이 내용은 공부하면서 느낄 때마다 TIL에 남기면 좋을 것 같다.

그 외에 모바일 앱을 개발하는 다른 선택지는?

  • 네이티브 개발 (Objective-C, Swift)
  • Flutter
    • Dart라는 Google이 만든 언어를 사용한다.(TypeScript와 비슷한 느낌도 드는 언어?)
    • 스타일링하는 방식이 다르다. (RN은 CSS같은 Flutter는 위젯에 속성을 쓰는 느낌)
  • Web App

Expo를 사용하자!

Expo를 사용하는 이유

  • Expo는 앱 개발, 구축, 배포를 신속하게 사용할 수 있는 도구이다.
  • 컴퓨터에서 작업한 결과를 바로 핸드폰으로 볼 수 있다.
  • 핸드폰에 Expo앱을 설치해야 하는 번거로움은 있지만 Xcode, 안드로이드 스튜디오를 설치하지 않아도 된다는 장점도 있다.
    • (iOS의 경우는 맥이 아니면 Xcode는 설치도 안 되니까…)

Expo를 사용하지 않는 다른 방법은?

  • Xcode, 안드로이드 스튜디오, 자바 등을 설치해서 컴퓨터에서 확인하는 방법이 있다.
    • Objetive-C, Swift 등 네이티브 언어와 모듈을 추가하려면 위 방법이 필수적이다.

React Native는 어떤 방식으로 동작할까?

1
2
3
4
5
6

1. 네이티브에서 이벤트가 발생하면
2. 이벤트를 RN가 이해할 수 있도록 JavaScript코드로 변환시켜서 전달함.
3. 전달받아서 반응한 다음에 다시 요청을 RN에서 보내면
4. RN에서 안드로이드, iOS가 이해할 수 있도록 변환해서 요청을 보내고
5. 이게 네이티브에서 처리된 다음에
6. UI가 업데이트 됨.

세팅하기

Expo 세팅

  • 먼저 Expo를 PC에 설치
1
2
3
4

//Expo CLI 설치
$ npm install --global expo-cli

//출처: https://docs.expo.dev/get-started/installation/
  • 리눅스, 맥 사용자는 Watchman이라는 것을 설치해야 함.
    • Watchman이 하는 역할?
      파일을 감시하고 있다가 변경되었을 때 다른 작업을 트리거할 수 있음. (즉, 코드 변화를 실시간으로 반영하기 위해서 사용)
1
2
3

$ brew install watchman

// 출처 : https://facebook.github.io/watchman/docs/install#buildinstall
  • 앱 스토어나 플레이스토어에서 ‘Expo’ (Or ‘Expo Go’)라는 앱을 설치

Expo로 새로운 앱 만들기 (React Native)

  • 아래와 같이 입력해서 새 프로젝트 생성
1
2

$ expo init my-app
//출처 : https://docs.expo.dev/get-started/create-a-new-app/
  • 실행하면 옵션을 선택하는 창이 나옴
  • blank를 선택해 주면 되는데 나는 TypeScript가 좋으므로
  • blank(TypeScript)를 선택하고 엔터를 쳤음.

Expo 앱에서 확인하기

  • 먼저 콘솔창에 expo login이라고 쳐서 로그인하고
  • 프로젝트에서 npm start를 치면 QR코드가 뜸.
  • expo 앱에서 로그인했으면 거기에서 바로 리스트가 뜨고
  • QR코드를 읽어도 됨

Reference

TIL, ReactNative, Expo, Watchman