[React-Native] 리액트 네이티브 시작하기( with Expo)

 

리액트 네이티브란?

리액트 네이티브(React Native)는 iOS와 안드로이드 앱 개발을 위한 라이브러리입니다. 자바스크립트로 구현된 기존의 모바일 앱들은 웹뷰를 이용한 하이브리드 방식이였습니다. 하지만 리액트 네이티브는 자바스크립트로 개발하지만, 화면 인터페이스는 네이티브 위젯으로 컴파일하여 빌드됩니다. 리액트 네이티브는 네이티브 UI를 사용하여 빠른 사용자 경험을 제공합니다.

 

 

개발환경

안드로이드 앱을 만들고 있다면 안드로이드 스튜디오를 다운 받아야합니다. 그리고 컴퓨터에 java를 다운받아야합니다. 시뮬레이터도 다운받아야하고요. 정말 받아야하는 소프트웨어가 많습니다. IOS도 Xcode를 다운받아야하고요. 하지만 저는 다 생략을 하고 프로토타이핑과 테스트를 목적으로 만들어진 간단한 툴을 이용할 것입니다. 

 

• node
• 리액트 네이티브
• iOS 개발환경(Xcode)
• 안드로이드 개발환경(JDK, 안드로이드 SDK, 안드로이드 스튜디오)
  
  

위에 필수로 다운 받아야하는 소프트웨어들 중에서 저는 node react-native만 다운 받고 exop를 이용해서 간단한 프로젝트들만 만들어볼 예정입니다. 리액트 네이티비를 쓰면 파일을 컴파일해서 써야하는데 expo가 이부분을 해결해 줄 겁니다. 

 

Expo (https://expo.dev/)

리엑트 네이티브를 베이스로 ios, aos, 웹 등을 개발하고 쉽게 빌드, 배포할 수 있게 도와주는 프레임워크입니다. 바닐라 react-native로 앱을 개발할 때 초기에 해줘야 하는 여러 가지 환경 설정이나 빌드를 쉽게 해줍니다. 저같은 앱 초심자가 쓰기에는 아주 훌륭하다고 생각됩니다. 하지만 진짜 앱을 출시하고 계속해서 발전시켜나갈 것이라면 expo보다는 제대로 된 개발환경을 조성해두고 발전시키는 것이 좋다고 합니다. 

 

 

Expo 설치하기

 

node와 npm이 설치되어있다면

#Install 
npm install --global expo-cli

Mac개발환경이라면 Watchman이라는 것도 다운 받아주셔야합니다. 

brew update
brew install watchman

 

이제 각자의 모바일에서 app store로 가서 Expo (or Expo GO) 앱을 다운받아주시면 됩니다. 

Expo는 모바일에서 바로 React Native 코드를 실행시켜서 보여줄 것입니다. 

 

 

이제 본격적으로 React-native 프로젝트는 만들어봅시다!

우선 expo로 프로젝트를 생성해줍니다. 그리고 그 파일로 넘어가세요 

#Crate new project
expo init my-project

일단 설치를 시작하면 시간도 많이 걸리고요. template를 선택할 수 있습니다. blank를 선택해주시면 됩니다. 

설치가 완료되었으면 주로 쓰시는 코드 에디터에서 오픈해주세요 저는 VSC를 썼습니다. 

 

 

 

cd my-project

프로젝트가 만들어졌습니다. 

 

expo에 로그인부터 해줘야합니다. 터미널창에서

expo login

이라는 명령을 보내시고 이메일과 비밀번호를 차례로 넣어주시면 됩니다 

 

자 그런 다음에 npm run start를 해줍니다. 

그러면 요로 expo 페이지가 열립니다. 

여기서 보이는 하단의 qr코드나 VSC에서 보이는 코드를 expo앱에 연결할 수 있습니다. 

App.js에서 무언가를 변경해보시면 Expo 앱에서 보실 수 있답니다.