Tips
1. React Native 공식 문서
React Native · Learn once, write anywhere
2. React Native를 쉽게 세팅할 수 있는 툴, Expo
sudo npm i -global expo-cli
expo init my-project- React Native의 단점은 초기 세팅이 매우 어렵다는 것이다.
- Expo는 JavaScript 코드와 마크업/스타일링만 한다면, 앱을 구동시킬 수 있도록 나머지 소프트웨어들이 세팅되어 있다.
- 테스트 목적이나 프로토타입을 만들 때 좋다.
3. Expo 프로젝트를 실행했을 때 웹이 열리지 않는 이유?
- Expo-cli 버전 6.0.0 이후에는 Metro Bundler UI를 사용할 수 없다고 한다.
4. 재로딩이 안되는 경우에는 r 키를 입력한다.
React Native
1. React Native란 무엇일까?
- React.js와 React Native를 사용하면 실제 Native 모바일 앱을 만들 수 있다.
- React는 상태를 관리하고 가상 돔으로 컴포넌트를 구축하는 툴이었다.
- React Native는 JavaScript로 코드를 작성하면, React Native는 각 운영체제 코드로 번역을 해주는 인터페이스이다.
- 예를 들어 JS로 버튼 컴포넌트 코드를 작성하면, RN은 운영체제에게 버튼을 그려달라고 요청한다.
⇒ 즉, 버튼을 만드는 주체는 **운영체제인** iOS, Android인 것이다.
2. React Native는 어떻게 작동할까?
- React Native에서 JSX로 작성한 컴포넌트는 각 운영체제에서 다음과 같이 컴파일 된다.
- 그렇다면 일반 로직을 작성한 JavaScript 코드는 어떻게 컴파일 될까? → JS 코드는 컴파일되지 않고, 네이티브 앱 안에서 JS 스레드를 구축하여 사용하는 방식이다.
- 다음은 React Native가 실제로 작동하는 과정이다.
- Native(iOS, Android)와 Bridge 부분은 우리가 직접 작성하는 것이 아니다. → 우리는 JavaScript만 작성한다.
- 전체적인 과정 흐름은 다음과 같다.
1. Native가 터치라는 이벤트를 감지함 → 어디서 눌렸는지, 얼마나 눌렸는지 등의 이벤트에 대한 데이터를 수집함
2. RN은 해당 데이터를 Json 메시지로 생성함 → Bridge가 메시지를 JS로 보냄
3. JS는 메시지를 받고 특정 코드를 실행함 → Native에게 요청을 보냄
3. Expo 프로젝트 살펴보기
- app.json은 React Native 앱의 설정과 실행 방식을 구성하는 파일이므로 매우 중요하다.
- App.js는 앱에 렌더링 되는 Root 컴포넌트이다.
- React Native에서 JSX에는
<h1>나<div>같은 일반적인 태그는 사용하지 못한다. ⇒ 해당 HTML 요소들은 DOM을 통해 브라우저에서 작업할 때만 사용할 수 있기 때문이다.
- 즉, 네이티브 기기는 브라우저가 아니기 때문에 DOM이 없어 HTML 요소를 지원하지 않는다.
4. React Native 실행하기
yarn start- Expo 프로젝트를 사용하기 때문에, 미리보기 할 기기에 Expo Go 앱을 다운받아야 한다.
