react native 친해지자! - 설치, 동작 원리

들어가기에 앞서

• 크로스 플랫폼 앱: 하나의 소스코드로 android, ios에서 똑같이 작동하는 앱을 말한다.
  android와 ios는 호환이 되지 않아서 사실상 두개의 앱을 만드는 것과 같은데, 크로스 플랫폼 앱 하나가 있으면 android, ios 운영 체제를 위해 동시에 개발 및 운영할 수 있다는 장점이 있다.
  -> 대표적으로 flutter, react native가 있다.

• 네이티브 앱: 특정 플랫폼(ios, android)에 최적화되어 작성된 애플리케이션으로, 해당 플랫폼의 전용 프로그래밍 언어로 작성된다.

• 웹앱: 모바일웹과 네이티브앱을 결합한 형태로 속도가 빠르다. 사실상 웹사이트를 보는 것이기 때문에 따로 설치할 필요가 없지만, 카메라등을 사용할 수 없고 브라우저 api만 사용할 수 있으며 터치 앱을 개발하기 번거롭다.

• 하이브리드 앱: 네이티브앱+웹앱 형식으로 네이티브앱에 웹뷰를 띄워 웹앱을 실행시키는 것이 보편적이다. 웹개발 기술을 사용해 앱을 개발할 수 있지만, 네이티브 개발 지식이 필수적이다.

• react native: 자바스크립트 기반 프레임워크로, 자바스크립트 기반 라이브러리, npm을 사용하며 android, ios 앱을 동시에 만들 수 있다. 성능이 가장 높다.

react native

react native는 런타임 중에 js 브릿지를 생성하고, 자바스크립트 코드를 네이티브 코드로 변환해서 컴파일한다. 브릿지를 통해 네이티브 UI에 접근한다.

장점:

• 코드 재사용: 리액트 컴포넌트 기반의 개발 방식을 사용해서, 코드 재사용이 용이하다.
• 실시간 미리보기: 개발중인 애플리케이션을 실시간으로 미리보기할 수 있는 기능을 제공한다.
• 네이티브 성능: 네이티브 컴포넌트와 상호작용하기 때문에 성능면에서 네이티브 앱과 유사한 결과가 나타난다.
• 웹 개발 친화적: 자바스크립트를 사용하므로 웹개발자들이 쉽게 배울 수 있다.

react native 동작 원리

react native에서 가장 중요한 건 자바스크립트가 아닌!
Bridge들을 통해서 코드가 운영제체와 통신할 수 있도록 하는 인프라 시설이다.

react native는 shell과 같다.
자바스크립트 코드를 넣고 그 코드는 운영체제와 이야기할 수 있는 것!

자바스크립트 코드를 짜고
-> 이 앱을 컴파일 시키고
-> 이 모든 인프라 시설들은 apk or ipa가 되고
-> app store로 간다!

react native 애플리케이션은 크게 3가지 주요 스레드에서 작동한다.
1. 메인스레드 2. 자바스크립트 스레드 3. 백그라운드 스레드
이들 스레드는 bridge라는 개념을 통해 서로 필요한 정보를 직렬화하여 통신한다.

• 메인스레드: UI그리기, 사용자 입력 처리, 애니메이션 같은 전환, 네이티브 이벤트 처리에 사용된다.
• 백그라운드 스레드: 컴포넌트의 레이아웃을 계산하고 그 결과를 메인 스레드에 전달해 실제 네이티브 뷰를 그리는 역할을 한다. yoga는 flexbox 레이아웃 시스템을 기반으로 한다.
• 자바스크립트 스레드: api 호출, 앱의 로직 처리, 로직 실행 등을 담당한다. 메인스레드와 통신한다.
• 브릿지: 자바스크립트와 네이티브 모듈간의 통신을 용이하게 하며, 비동기적으로 전달하여 자바스크립트가 네이티브 코드 실행을 기다리지 않아도 되고, 이로 인해 애플리케이션의 반응성이 유지된다.

1. metro 번들러 작업 (다양한 옵션을 받아 모든 코드와 종속성들을 포함하는 단일 자바스크립트 파일을 생성하여 반환함)
2. 자바스크립트 엔진 초기화
3. 자바스크립트 스레드 실행 (UI의 가상 표현, 가상 DOM 생성)
4. 브릿지를 통한 통신 (UI 업데이트 명령 전달)
5. 백그라운드 스레드에서 레이아웃 계산 (전달받은 UI 구조를 바탕으로 레이아웃 계산)
6. 메인스레드에서 네이티브 UI 렌더링 (네이티브 UI 컴포넌트 생성, 화면에 표시)
7. 사용자 인터랙션과 이벤트 처리 (사용자의 터치는 메인 스레드에서 처리되고, 브릿지를 통해 자바스크립트 스레드로 전송됨)

비동기 통신

• 이벤트 루프와 messageQueue를 사용해, 자바스크립트에서 발생하는 이벤트나 호출을 네이티브 코드로 전달하고, 메세지 큐에는 실행할 작업들이 순선대로 저장되며, 작업을 하나씩 꺼내 실행한다.

Expo

그 어떤 시뮬레이터나 java, xcode를 설치하지 않고
react native를 테스트할 수 있다.
-> 우리는 javascript만 만들어도 되는 도구

1. 윈도우 기준으로 명령어 하나로 바로 설치하고

npm install --global expo-cli

2. 폰을 켜서 expo go 어플을 설치하고 계정을 만든다!

1. 사용자가 스크린을 터치하면
2. native는 자바스크립트 코드에 메세지를 보내고
3. 자바스크립트는 메세지를 받아서 다른 메세지를 보낸다
4. 그 메세지는 다시 native로 가서 ui를 업데이트 한다.

참고 및 출처

• 노마드 코더
  https://velog.io/@tosspayments/React-Native%EC%99%80-Flutter-%EC%96%B4%EB%96%A4-%ED%8A%B9%EC%A7%95%EC%9D%B4-%EC%9E%88%EB%82%98%EC%9A%94
  https://medium.com/@jeongbaebang/react-native%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%EC%8B%A4%ED%96%89%EA%B3%BC%EC%A0%95-f475dd132ad1