React Native 동작원리와 개발 도구 알아보기
지난 포스팅에서는 크로스 플랫폼 앱 개발 도구는 무엇이고 네이티브 앱 개발과의 차이점은 무엇인지와 각 개발도구의 장단점은 무엇이 있는지 알아보았습니다. 저는 혼자서 간단하게 앱의 기획부터 디자인, 서버 구축까지 할 것이기 때문에 네이티브 앱 개발 방식을 통해 IOS와 안드로이드 모두 개발하기에는 역부족으로 크로스 플랫폼 앱 개발을 통해 개발해 보려고 하며, 비교적 사용할 수 있는 언어인 JavaScript를 이용한 React Native 도구를 이용해 개발해보고자 합니다. 그렇다면 오늘은 본격적인 앱 개발에 앞서 React Native의 동작 원리는 무엇이고 React Native를 개발하기 위해 필요한 도구는 무엇인지 알아보겠습니다.
1.React Native 동작 원리
1) JavaScript 코드 실행
JavaScript 코드는 React Natvie를 위한 런타임 환경에서 실행되며, JavaScript 엔진은 앱에서 사용되는 JavaScript 코드를 해석하고 실행합니다.
2) React 컴포넌트와 Virtual DOM
React Native는 React의 개념을 기반으로 하며 앱은 여러 개의 React 컴포넌트로 구성됩니다. 각 컴포넌트는 Virtual DOM에 의해 추상화됩니다. Virtual DOM은 메모리에 존재하는 가상의 DOM구조로, 변경된 부분만을 실제 DOM에 반영함으로써 UI를 업데이트하는 과정을 최적화합니다. 여기서 DOM은 Document Object Model의 약자로 웹페이지의 구조화된 표현을 제공하는 프로그래밍 인터페이스입니다. HTML, XML 및 XHTML 문서를 나타내는 표준 프로그래밍 인터페이스이며, 문서의 구조, 스타일, 내용 및 기능을 표현합니다. 웹 브라우저는 DOM을 사용하여 웹 페이지의 요소를 조작하고 업데이트할 수 있습니다. DOM에 대해서는 웹 개발 시 더 자세히 알아보겠습니다.
3) Bridge
React Native의 가장 핵심적인 요소 중 하나의 Bridge입니다. Bridge는 JavaScript 코드와 네이티브 코드 간의 통신을 담당합니다. JavaScript 코드가 네이티브 모듈에 액세스해야 할 때, Bridge가 이를 처리하여 네이티브 코드로 전달하고 결과를 JavaScript에 다시 전달합니다.
4) Native Modules
네이티브 모듈은 JavaScript 코드에서 네이티브 코드를 호출하기 위한 인터페이스를 제공합니다. React Native에서 제공되는 모듈 외에도 사용자 정의 네이티브 모듈을 작성하여 기존 네이티브 코드를 활용할 수 있습니다.
5) Rendering
React Native는 각 플랫폼(IOS 또는 Android)에 대해 별도의 렌더링 엔진을 사용합니다. IOS에서는 Objective-C 또는 Swift로 작성된 Cocoa Touch 프레임워크를 사용하고, Android에서는 Java 또는 Kotlin으로 작성된 Android SDK를 사용합니다. React Native의 JavaScript코드는 React 컴포넌트와 Virtual DOM을 사용하여 UI를 정의하고, Bridge를 통해 네이티브 모듈에 액세스 하여 네이티브 기능을 사용합니다. 마지막으로 렌더링 엔진은 JavaScript와 네이티브 코드 간의 통신을 처리하고 최종적으로 앱의 UI를 렌더링합니다.
2. React Native 앱 개발 도구(Expo와 React Natvie CLI)
React Native 앱의 개발, 디버깅, 빌드, 배포까지 앱 개발을 위한 여러 도구가 있지만 그중 가장 유명한 Expo CLI와 React Native CLI에 대해 소개해 보겠습니다.
1) Expo
Expo는 React Native 앱 개발을 위한 프레임워크로, 개발 과정을 간편하게 만들어주는 도구입니다.
Expo의 주요 장점은 첫 번째로 간편한 설정입니다. Expo를 사용하면 초기 환경 설정이 간단하고 빠르게 진행됩니다.
React Native 프로젝트를 시작하는 데 필요한 모든 설정을 자동으로 처리해 줍니다.
두 번째로 개발 중인 앱을 빠르게 미리 보기 할 수 있는 Expo App을 제공합니다.
이를 통해 앱의 디자인 및 동작을 실시간으로 확인하고 수정할 수 있습니다.
세 번째로 다양한 내장 기능과 라이브러리를 제공하여 개발을 효율적으로 진행할 수 있게 도와줍니다.
예를 들어 카메라, 지도, 푸시 알림 등의 기능을 쉽게 추가할 수 있습니다.
그러나, Expo는 아래와 같은 단점을 갖고 있습니다.
첫번째로 네이티브 기능 사용에 제한이 있을 수 있습니다. 일부 고급 기능이나 특정 기기 하드웨어에 접근해야 할 경우 제약이 있을 수 있습니다.
두번째로 Expo는 외부 네이티브 모듈에 대한 의존성 관리를 단순화하기 위해 JavaScript 기반의 Native Modules를 사용합니다. 이는 일부 네이티브 코드를 작성해야 할 때 제약이 될 수 있습니다.
세번째로 큰 규모의 프로젝트에서 Expo의 성능이 저하될 수 있습니다. 특히 많은 양의 자원을 필요로 하는 프로젝트의 경우 이를 고려해야 합니다.
2) React Native CLI
React Native CLI는 React Native 프로젝트를 생성하고 관리하는 데 사용됩니다. Native 코드를 직접 편집하여 앱을 개발할 필요성이 있는 경우 React Native CLI를 사용합니다.
React Native CLI의 장점으로 첫 번째는 네이티브 기능에 대해 높은 접근성을 갖고 있어 네이티브 코드에 직접 접근하여 대부분의 네이티브 기능을 사용할 수 있다는 것입니다. 이러한 장점 때문에 React Natvie CLI를 통한 개발 방식을 선택하게 됩니다.
두 번째는 프로젝트를 더욱 세밀하게 커스터마이징 할 수 있습니다. 원하는 대로 프로젝트를 구성하고 필요한 기능을 추가하거나 제거할 수 있습니다.
세 번째는 Expo와는 달리 각종 라이브러리와 플러그인을 보다 자유롭게 사용할 수 있습니다.
그러나 React Native 역시 아래와 같은 단점을 갖고 있습니다.
첫 번째로 초기 환경 설정과 빌드 설정 등을 직접 구성해야 하기 때문에 Expo에 비해 초기 설정이 조금 더 복잡합니다.
두번째로 일부 네이티브 코드를 직접 작성해야 할 수 있습니다. Expo를 사용할 경우 네이티브 앱의 제한된 기능만 제공할 수 있는 반면 JavaScript만으로 모든 것을 처리하여 상대적으로 쉽게 개발할 수 있지만 React Native CLI에서는 네이티브 코드를 직접 다뤄야 하기 때문에 일부 크로스 플랫폼 앱 개발 방식을 사용하는 장점에 반대되는 점을 갖고 있습니다.
세번째로 개발한 앱을 배포하고 업데이트하는 과정이 Expo에 비해 복잡할 수 있습니다. 특히 네이티브 코드를 다루는 부분이 추가되어 배포 과정이 더욱 복잡해질 수 있습니다.
3) Expo VS React Native CLI
앱을 개발할 때 프로젝트의 특성과 요구사항 그리고 개발자의 선호도와 기술적 경험에 따라 두 가지 도구 중 한 가지를 선택하겠지만 보통 초기 개발 단계에서 빠르게 프로토타입을 만들어야 할 때나 간단한 앱을 개발하고자 할 때 Expo를 사용하는 것이 적합합니다. 위에서 장점을 알아보았지만 Expo는 초기 설정이 간단하고 개발자가 네이티브 코드를 직접 다루지 않아도 되므로 빠르고 효율적인 개발이 가능하기 때문입니다. 반면에 프로젝트가 네이티브 기능에 높은 접근성이 요구되거나 더 많은 자유도와 커스터마이징이 필요한 경우 React Native CLI를 선택하는 것이 적합합니다. 또한 네이티브 코드를 직접 작성할 줄 알아야 하기 때문에 어느 정도 개발 경험이 풍부한 개발자가 선택하기 좋다고 생각합니다.
마무리
오늘은 이렇게 React Native의 동작 원리를 간단하게 알아보았고 React Native를 개발할 때 도움을 주는 도구에 대해서도 알아보았습니다. 저는 안드로이드 앱 개발 언어인 Kotlin에 대해서만 일부 지식을 갖고 있고 IOS 개발 언어인 Swift에 대해서는 잘 모르고 있기 때문에 React Natvie를 통한 앱 개발 방식을 선택했습니다. 또한 네이티브가 갖고 있는 복잡한 기능들을 사용해 구현하기보다는 간단하게 필수 기능만을 갖고 있는 앱을 만들 계획이기 때문에 설정이 편하고 여러 플랫폼에서의 형상을 빠르게 확인할 수 있는 Expo를 통해 개발해 보고자 합니다. 다음 포스팅에서는 Expo의 초기 설정 방법과 첫 개발 과정을 포스팅하도록 하겠습니다.