[ 앱 개발자 도전기 : 크로스플랫폼_ReactNative ] React Native 공부 1_ ReactNative의 동작 구조 원리와 개발 방식{Expo CLI & ReactNative CLI}
App_Dev : RN
[ 앱 개발자 도전기 : 크로스플랫폼_ReactNative ] React Native 공부 1_ ReactNative의 동작 구조 원리와 개발 방식{Expo CLI & ReactNative CLI}
∇ React Native 공부 1_ ReactNative의 동작 구조 원리와 개발 방식{Expo CLI & ReactNative CLI}
목 차
1. React Natvie는 어떻게 IOS와 Android 두 가지 플랫폼에서 작동하는가?
2. RN의 동작 원리.
3. RN의 두 가지 개발 방식 (Expo/RN CLI)
Ⅰ. React Natvie는 어떻게 IOS와 Android 두 가지 플랫폼에서 작동하는가?
RN(ReactNative) 은 모바일 웹앱이나 하이브리드 앱을 제작하는 것이 아닌,
"크로스플랫폼 / 네이티브 앱"을 제작하기 위해 사용하는 오픈 소스 프레임워크입니다.
.
.
일반적으로 IOS 네이티브 앱은 '오브젝트 C, Swift' 코드를 활용해서 IOS 플랫폼에 맞게 컴파일하고
Android 네이티브앱은 (Java, Kotlin) 코드를 Android 플랫폼에 맞도록 해주는 컴파일러가 존재하여서
각각의 플랫폼에서 동작 가능하도록 해줍니다.
.
.
그런데! 위에서 말했듯이 RN은 크로스플랫폼 네이티브 앱입니다.
그렇다면, '크로스플랫폼 앱'인 ReactNative는 어떻게
각기 다른 플랫폼에서 네이티브 앱을 제작하고 구동시킬 수 있는지 알아보도록 하겠습니다.
Ⅱ. RN의 동작 원리.
RN의 동작원리에 대해서 정리하기에 앞서서, 동작원리를 이해하는데 필요한 'DOM'의 작동방식에 대해서 먼저 알아보겠습니다.
정적인 상태만 있는 웹페이지를 그릴때는 HTML/CSS면 충분하지만
그 이상으로 동적인 기능들을 구현할 때에는 JS의 DOM이 필요하게 됩니다.
🩻 DOM (Document Object Model )
:: DOM 이란 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성&변형&삭제 할 수 있도록 돕는 인터페이스입니다.
이 객체모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
종류로는
: Core DOM, HTML DOM, XML DOM
으로 구분됩니다.
이러한 DOM은 W3C의 표준-객체모델이며,
아래와 같은 계층 구조를 가집니다.
🩻 Virtual DOM
React 상에서 Virtual DOM의 개념은
'화면이 어떤 모습이어야 하는지를 개발자가 작성한 내용과 실제 화면에 렌더링 되는 것 사이에 존재하는 레이어'에 해당됩니다.
요약하면, 개발한 코드와 작동하는 화면 사이에서 렌더링 효율을 높이는 역할을 수행합니다.
브라우저 상에서 UI구조를 렌더링하는 과정에서 반드시 DOM을 수정하게 되는데, 과도한 DOM에 접근한 수정은 성능 저하를 유발하게 됩니다.
React는 페이지의 변화를 바로 렌더링시키지 않고,
우선적으로 메모리상에 존재하는 가상 DOM에서 변경된 부분을 계산하고, 최소한의 변경사항만 렌더링하게 됩니다.
🩻 React Native의 작동 원리.
:: '웹 기반의 화면'으로 최종 렌더링되는 대부분의 크로스-앱 개발 방법과는 다르게
"RN"은 브라우저DOM으로 렌더링시키지 않고
Object-C API를 호출하여 IOS 컴포넌트를 렌더링하고,
Java API를 호출하여서 Android 컴포넌트를 렌더링합니다.
R.N에서는 'Bridge'가 대상 플랫폼( IOS or AOS)의 Native UI 요소에 접근하는 인터페이스를
제공하기 때문에 가능한 일입니다.
ⓐ 개발자는 JS문법으로 개발을 진행합니다,
ⓑ RN에서는 JS로 개발된 코드를 빌드 시, 각 OS에 맞는 JS BUNDLE을 생성합니다.
ⓒ 생성된 JS Bundle은 JS 쓰레드로 실행이 되는데,
각 플랫폼에서 앱을 실행하는 Native 스레드와 직접 연결은 되지 않습니다.
이 떄, RN에서 제공하는 Bridge를 통해서 상호작용을 합니다.
Ⅲ. RN의 두 가지 개발 방식 (Expo/RN CLI)
.
🩻 Expo Cli.
Expo는 RN 개발을 개발자가 쉽게 할 수 있도록 도와주는 툴입니다.
간단하고 편리하게 짜여지는 대신, 디테일한 제저와 설정 측면에서는 조금 답답함이 있습니다.
◆장점.
- 무료로 사용이 가능하며, 기본적인 설정이 미리 구성.(숨겨진 native 파일을 통해 자동 관리)
- 편리하고 유용한 기능들이 있어서 개발 용이.
- 배포가 편리하여서 버전 관리가 쉽습니다.
◆단점.
- native 파일 제어 불가./ OS Layer와 상호작용 불가/ 네이티브 언어로 추가 작성 불가.
- Expo에서 제공하는 기능만 사용 가능(모듈 불가)
- Expo Client에서는 잘 작동해도, 단말기에서는 오류 발생 가능.
🩻 ReactNative Cli.
Expo와 반대로 자유도가 높아서, 개발의 많은 기능이 가능.!
◆장점.
- Native 기능에 접근 가능(모듈 사용도 자유로운 편)
- OS Layer와 직접 상호작용 가능.
- 원하는 언어로 추가 작성 가능
- 새로운 기능이 필요한 경우, 모듈을 직접 제작 가능.
◆단점.
- 초기 개발환경 구축 및 실제 앱 개발 시, 비교적 높은 노력 필요.
- Mac 에서만 IOS/AOS 지원.
