[RN] React Native와 Native (feat. Expo-CLI vs. React-Native-CLI)
React Native를 시작하는 방법에는 두 가지가 존재합니다.
1. React Native CLI
2. Expo CLI
들어가기 전에..
React-Native-CLI 와 Expo-CLI를 비교하기전에 React Naive란 무엇이고 Native를 알아야 한다. React는 가상의 DOM을 통해 DOM을 조작하여 UI를 업데이트 하는 방식의 JavaScript기반의 오픈소스 라이브러리입니다. 이름만 들어서는 React Native도 비슷하다고 보여질 수 있습니다. 하지만 React와 React Native간의 차이는 명백히 존재합니다
React Native와 React
우선 공통점으로는 JavaScript라는 메인 언어를 두고 사용한다는 점입니다. 당연하게도(?) Typescript도 지원이 됩니다.
공통의 언어를 사용하기에 역시나 코드를 작성하는 문법이 유사하고 그렇기 때문에 개발 방식에서도 유사한점이 많습니다. 엄밀히 말하면, React 방식의 네이티브 앱을 만들고자 React Native를 개발했기 때문에 같을 수 밖에 없습니다.
둘이 유사하다는 것은 결국엔 비슷한 생명주기를 가지고 작동한다고 착각을 불러올 수 있습니다.
| React | React Native | |
| 랜더링 | 브라우저 | iOS, Android |
| DOM 조작 | 필요 | 필요하지 않음 |
실제로는 React는 웹 브라우저에서 동작하지만, React Native의 경우 iOS와 AOS 같은 모바일 환경에 맞춰 동작합니다. 즉, 그렇기때문에 DOM을 조작하지 않고, Native (네이티브) 의 환경에서는 UI를 조작한다는 차이가 있습니다.
React-Native-CLI는 어떠한 툴을 사용하지 않고 오로지
React natvie만을 이용해서 개발하는 방식이다.
장점 : 개발자 원하는 기능이나 라이브러리들을 자유롭게 제어가 가능하다.
단점 : 초기 설정이 까다롭고 Android Studio, Xcode 등으로 각 플랫폼마다 설치하고 빌드해야 한다.
Native란?
Native란?
특정 하드웨어 또는 플랫폼에 종속되어 실행되는 프로그램
많은 소프트웨어 단어에서 그렇듯 어원을 풀어보면 이해가 쉽습니다. 네이티브(Native)란 사전적인 정의는 원주민, 현지인이라는 뜻을 가지고 있습니다. 이렇듯 특정 환경에서 직접 설치되어 동작하는 애플리케이션이라고 볼 수 있습니다.
대표적으로 iOS와 Android 두 가지가 있습니다.
iOS 플랫폼을 위한 앱은 swift 또는 Objective-C를 사용하여 개발합니다.
Andorid의 플랫폼을 위한 앱은 Java또는 Kotiln을 사용하여 개발됩니다.
각 플랫폼의 네이티브 언어와 도구를 사용하여 작성되기 때문에 해당 플랫폼에서 최적의 성능과 사용자 경험을 제공할 수 있게 됩니다. 그렇다면, 이 두 가지 플랫폼을 개발하기 위해서 Java, Kotiln, Swfit 만을 배워야할까?
이러한 고민으로 등장한것이 바로 React Native입니다. 물론, 이것 외에도 React Native, Xamarin, Flutter 등과 같은 크로스 플랫폼 프레임워크들로 단일 코드베이스를 통해 여러 플랫폼에 앱을 배포할 수 있도록 하는 도구들이 등장하게 되었습니다.
크로스 플랫폼( cross-platform) 이란?
여러 플랫폼이나 운영 체제에서 동일한 소프트웨어나 애플리케이션을
실행할 수 있도록 도와주는 개발 도구를 말합니다.
즉, 하나의 코드베이스로 여러 플랫폼을 대상으로 하는 애플리케이션을 개발할 수 있는 방법을 의미합니다.
그렇기 때문에, 앱을 개발할 때 중요한 것은, 네이티브 앱과 크로스 플랫폼 앱의 장단점을 비교해가며 개발하는 것이 좋습니다. 하지만 결국에는 네이티브로 가는 것이 좋지만.. 크로스 플랫폼만으로도 많은 기능을 할 수 있습니다.
물론, 요즘에는 백엔드의 언어로도 쓰이지만, 그래도 본래의 쓰임은 웹을 기반으로 사용하는 JavaScript를 어떻게 Native로 구성한다는 말인지 의아할 수 있습니다. 자바스크립트 코드는 다음의 단계를 거치게 됩니다.
- JavaScript 코드 실행
- Bridge를 통한 네이티브 모듈 연결
- UI 구성 요소의 동적 생성
Brideg란 생소한 개념일 수 있는데, 앞서 설명했듯 네이티브 환경에서는 자바 (Java/Objective-C/Swift)나 Kotlin 등과 같은 언어로 작성된 코드가 실행되는 것이 그 기본입니다. 이 두 환경간에는 서로 다른 언어와 런타임이 사용되기 때문에, Bridge가 이 둘 간의 통신을 중계하고 조정하는 역할을 담당하는 것입니다.
React Native는 자바스크립트 코드와 네이티브 코드 간의 통신을 위해 Bridge를 통한 모듈 연결 방식으로 동작을 수행합니다.
요약하면, React Native와 같은 크로스 플랫폼 기술은 자바스크립트 코드를 사용하여 여러 플랫폼에서 동작하는 앱을 만들 수 있게 해주는데, 이때 네이티브 환경에서 자바스크립트 코드 실행과 네이티브 코드와의 효과적인 통신이 핵심 원리라고 말할 수 있습니다.
위의 그림처럼 JavaScript코드는 빨간색의 영역만을 담당하며 나머지는 Bridge를 통해서 각각의 환경에 맞게 조정하게 됩니다. 즉, React와 같은 규칙을 통해 코드를 구현한 컴포넌트들은 Native 위젯으로 컴파일이 됩니다. 그러고나서 Native 플랫폼 API는 JavasScript를 노출하고 JavaScript와 Native 플랫폼 코드를 연결합니다.
쉽게 말해 React 코드를 Native 환경에서 돌리기(?) 위해서는 중간의 Brdige가 상호작용을 담당하면서 네이티브 모듈에 접근하여 동작을 요청하고 콜백 함수를 호출하는 등의 결과를 전달하기 위한 전달자인셈이다.
Bridge는 자바스크립트 런타임과 네이티브 간의 상호작용을 담당하는 역할을 한다.
Expo
Expo는 JavaScript나 TypeScript와 같은 단일 코드 베이스로 여러 플랫폼에서 실행되는 애플리케이션을 만들 수 있게 지원하는 프레임워크이자 플랫폼입니다. 이를 통해 iOS,Android,Web 앱을 개발할 수 있도록 도와주는 역할을 합니다.
그렇다면, Expo는 갑자기 왜 뜬금없이 나오게 된 것일까? Expo는 JavaScript 또는 TypeScript로 작성된 단일 프로젝트를 통해 앱을 개발하고, 이 앱이 사용자의 모든 기기에서 네이티브로 실행될 수 있도록 합니다. 즉, React Native와 Expo를 사용하면 개발자는 하나의 코드베이스로 여러 플랫폼을 대상으로 앱을 만들 수 있으며, 이 앱은 각 기기에서 네이티브 앱으로 실행될 수 있습니다.
Expo는 React Native를 사용하여 모바일 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 프레임워크입니다. Expo를 사용하면 네이티브 코드를 작성하지 않고도 기기 기능에 액세스할 수 있으며, 개발 및 배포 프로세스를 단순화할 수 있습니다. 이를 통해 개발 과정에서 발생하는 복잡성을 줄이고, 보다 빠르고 편리한 개발 경험을 제공할 수 있습니다. 하지만, 네이티브 파일을 제어할 수 가 없어, 라이브러리 사용에도 제한이 있다는 큰 단점이 있다.
결국 나오게된 이유는 단순하다. 간편함, 빠르고 편리함 어찌보면 기능이 많고 고도화될 수 록 반대의 길을 걷게 되지만, 결국에는 간편함과 빠르게 산출물을 내야하는 상황이 생길 수 가 있기 마련인데, 이때 개발에 대한 리소스를 줄일 수 있는 것이 있다면 사용하기 적절하지 않을까 생각하게 되었습니다.
초기에 입문으로는 Expo CLI로 익혀보고 고도화를 할 때는 결국에는 React Native를 하는 것이 맞을 것이다.
결론,
초기에 입문으로는 Expo CLI로 익혀보고 고도화를 할 때는 결국에는 React Native를 하는 것이 좋다.
하지만, 더 고도화된 기능을 위해서는 Andorid 또는 Swift를 배워 Native 개발을 넘어가는 것이 좋다.
다음 포스팅에서는 React Native Expo CLI를 집중적으로 다뤄보겠습니다.
