React Native
- 앱을 개발하기 위해 사용되는 기술은 크게
Flutter, React Native가 있다. Flutter은Dart언어를 기반으로 하고,React Native는 React를 사용하는 것처럼Javascript로 작성된 코드를 컴파일 하여 애플리케이션을 생성한다는 차이점이 있다.- 리액트 네이티브 안에는
React Native Bridge가 존재하는데, 자바스크립트 엔진과 네이티브 코드 사이에 인터페이스 역할을 담당한다. - 즉
React Native Bridge가 운영체제와 통신하며 네이티브 어플리케이션을 생성하기 때문에 운영체제 별로 필요한 시뮬레이터를 사용해야 한다. - IOS => Xcode , Android => Android Studio
- 리액트 네이티브 모듈은 Swift 또는 Java로 확장된 코드이기 떄문에, Bridge가 자바스크립트 엔진에서 호출된 함수를 자바 혹은 스위프트로 전달하고, 반환된 값을 자바스크립트로 전달하기 때문에 리액트를 설치만 했던 것과는 달리 추가적으로 설치해야 할 것들이 있다.
React Native 구조
React Native Bridge
- 자바스크립트 엔진과 네이티브 모듈 간의 통신을 담당한다.
- 자바스크립트에서 호출된 함수를 Swift 또는 Java로 전달하고, 반환값을 다시 자바스크립트 엔진에 전달한다.
Native Modules
자바스크립트 엔진
- 리액트 네이티브가 자바스크립트 엔진에서 실행되며, 자바스크립트는 애플리케이션의 로직 실행을 담당한다.
자바스크립트 모듈
- 자바스크립트로 작성된 모듈로, 리액트 컴포넌트와 같은 UI를 정의하거나 로직을 정의하는데 사용된다.
렌더링 과정
- 리액트 컴포넌트 작성
- 리액트 컴포넌트를 작성하고, 작성된 컴포넌트는 props와 state를 통해 렌더링된다.
- Virtual DOM 업데이트
- 가상돔을 사용하여 업데이트 된다.
- Native 모듈 호출
- Bridge를 통해 네이티브 모듈이 호출되며, Java 또는 Swift로 작성된 코드가 네이티브 기능을 제공한다.
- Native UI 업데이트
- 네이티브 모듈을 호출하여 UI를 업데이트 하며, Bridge를 통해 자바스크립트 엔진에서 호출된다.
- 실제 DOM 업데이트
- Native UI가 업데이트 되면 실제 DOM이 업데이트 된다.
설치 (Expo)
- 리액트 네이티브로 개발하는 방법은
Expo, React Native CLI가 있다. CLI는 앱을 개발할 때 자주 사용되는 네이티브 기능(위치, 카메라 등)을 패키지로 묶어서 제공한다.- 사용해야하는 환경에 따라 에뮬레이터를 설치해야 하며, 기타 다른 설치 작업이 복잡한 편에 속한다고 한다.
Expo는 복잡한 개발 환경 구축을 최소화하고, 네이티브 모듈 사용이 불가하기 때문에 기능 구현상 어려움을 겪을 수 있다.- 처음 프로젝트를 구성할 때, web view & mobile view 를 쉽게 사용할 수 있는
Expo로 구성하고, 후에CLI로 넘어가는 것도 가능하다고 하기에,Expo로 구성한다.
1. Expo 가입 & 설치
- Expo
- 우선 Expo 홈페이지에서 회원가입을 진행한다.
- 안드로이드에서는
Expo, IOS는Expo Go애플리케이션을 각각 설치한다. - 터미널에서 expo cli 를 설치한다.
1
npm install --global expo-cli
- expo로 프로젝트를 생성한다.
1
expo init '프로젝트 이름'
2. 연결과 실행
- 프로젝트를 생성했다면, 생성한 프로젝트를 expo에서 볼 수 있도록 본인의 계정과 연결시켜주어야 한다.
1
expo login
- 본인 계정의 아이디와 패스워드를 입력하면 연결이 완료되고,
프로젝트를 실행 (npm run start, yarn... 등)후a,w,i등 본인이 확인하려는 실행 환경에 맞춰 커맨드를 입력하면 실행할 수 있다. - 안드로이드와 IOS의 경우 에뮬레이터가 필요할 수 있다.
- QR코드를 스캔하면 본인의 휴대폰에서도 프로젝트 실행을 확인할 수 있다.