[React Native] Expo로 RN 쉽게 시작하기

React Native

리액트 네이티브는 리액트로 모바일 앱을 만들 수 있는 프레임워크다.

모바일 앱을 만들 수 있는 다양한 언어와 프레임워크들이 있지만, 리액트 네이티브를 사용하는 이유는 크게 두 가지다.

• 비용 절약

리액트 네이티브는 안드로이드, iOS 네이티브 앱을 One Source, 즉 하나의 코드로 동시에 만들 수 있기 때문에 여러 비용, 시간 측면에서 크게 절약된다.

• 낮은 러닝커브

네이티브 역시 리액트를 기반으로 하기 때문에 기존에 리액트를 사용할 줄 아는 사람이라면 빠르게 배울 수 있다.

리액트 네이티브의 최근 아키텍처는 아래와 같이 변경되었다.

 

 

React Native 프로젝트 만들기

리액트 네이티브로 프로젝트 만드는 방법은 여러 가지가 있다.

공식 문서에서는 크게 두 가지를 소개하고 있다.

• Expo Go
  • 셋업이 아주 쉽고 빠르게 시작할 수 있다.
  • Native 코드를 수정할 수 없다. (java, swift 등의 언어로 수정 불가능)
  • 빌드와 배포까지 편하게 가능
  • Expo CLI를 통해 제어한다.
• React Native CLI
  • 네이티브 코드를 직접 수정할 수 있다. 높은 자유도!
  • 모든 인프라를 직접 설치해야 한다
  • Android Studio 또는 Xcode를 설치하고 여기서 빌드해야 한다.

그 외에도 CRNA (Create React Native App), ignite 같은 보일러 플레이트가 있다.

나는 별도의 프로그램 설치 없이 빠르게 시작해보기 위해 Expo로 프로젝트를 만들어보기로 했다.

 

 

Expo로 RN 프로젝트 만들기

먼저 사전 준비로 Expo Go 앱이 깔려있어야 한다.

Expo 회원가입도 해두어야 한다!

https://expo.dev/

Expo

 

 

 

가입을 하고 프로젝트를 생성하면 아래와 같은 Overview가 나온다.

Expo를 처음 이용하거나, eas-cli를 설치한 적이 없다면 터미널을 열어서 CLI를 설치

npm install --global eas-cli

 

프로젝트를 진행할 경로로 이동해서 두 번째 줄인 create-expo-app 을 실행한다.

잘 되었다면 이런 상태가 된다. 이제 생성한 프로젝트를 열어주고 EAS를 초기화해야 한다.

 

 

👀 EAS(Expo Application Service)

• Expo의 클라우드 빌드 서비스. 명령어 하나만으로 손쉽게 배포 가능!

깃허브의 레포지토리 같은 느낌이라고 보면 될 것 같다.

로그인 하라는 메시지가 먼저 뜨는데 Expo 가입한 계정으로 로그인해주면 된다.

 

 

배포

아래의 명령어로 현재까지의 프로젝트를 배포할 수 있다.

eas update

브랜치 이름을 선택하는 부분이 있는데, 편한 대로 설정. (나는 기본인 main으로 진행함)

배포가 완료되면 URL이 하나 뜬다.

링크로 들어가서 OS별 Preview를 누르면 QR코드가 나온다!

앱스토어나 플레이스토어에서 앱을 등록하는 과정 없이 간이 배포 완료!

 

 

 

React Native의 주요 컴포넌트들

아래는 공식문서에서 말하는 주요 컴포넌트들이다.

웹과 비교해보았을 때 크게 이렇게 볼 수 있겠다.

• <View> 컴포넌트
  • <div> 태그
• <Text> 컴포넌트
  • <p> 태그
  • RN에서는 텍스트를 꼭 컴포넌트로 감싸주어야 에러가 나지 않는다.
• <Image> 컴포넌트
  • <img> 태그
  • 로컬에서 불러올 때는 require 메서드를 이용
  • <Image source={require('./img/check.png')} />
  • 외부 이미지를 불러올 때는 uri 속성 이용
  • <Image style={{ width: 100, height: 100 }} source={{uri: 'https://velog.velcdn.com/images/_jouz_ryul/post/1a19773e-605e-4ed1-a0f3-245b7c2e13cd/image.jpeg',}}/>
• <ScrollView> 컴포넌트
  • 스크롤 할 수 있는 <div> 태그
• <TextInput> 컴포넌트
  • <input type="text"> 태그

그리고 버튼처럼 많이 사용하는 <TouchableOpacity> 컴포넌트. onPress라는 속성을 통해 onClick 시의 기능을 넣어줄 수 있다.

 

 

 

 

 

UI 컴포넌트 외에는 리액트를 다루는 방식과 많은 차이가 없는 것 같다. (아직까지 느끼기엔!)
웹만 보다가 앱을 보다 보니 뭔가 새롭기도 하고.. 👀

 

리액트 네이티브 공식 문서를 남기는 것을 마지막으로 오늘 글을 마친다!

https://reactnative.dev/

React Native · Learn once, write anywhere