24-2학기 앱개발 프로젝트를 준비하면서, 크로스 플랫폼 앱 개발을 하기로 팀원들과 결정했다.
프레임워크를 결정하기 위해 알아보던 중 하이브리드 앱 개발 프레임워크 중 Flutter와 ReactNative가 가장 많이 사용한다는 점을 알게 되었다. 우리 동아리 내에서는 플러터를 많이 사용하고 있었으나, JS에 익숙하고 React를 다뤄본 적이 있는 나로써, 비교적 빠른 시간 내에 결과물을 만들어 내야 했기에 ReactNative 프레임워크(이하 RN)를 사용하기로 결정했다.
RN은 2013년 Meta에서 출시했으며 JavaScript 기반의 오픈 소스 크로스 플랫폼 앱 개발 프레임워크로 개발자는 보다 더 짧은 개발 주기와 빠른 개발 속도로 고성능의 모바일 앱을 개발할 수 있게 되었다. 또한, JSX(JavaScript-XML) 프레임워크라는 강점으로 모바일 앱 개발을 위해 Swift나 Java와 같은 복잡한 프로그래밍 언어를 학습할 필요가 없다. 프레임워크에서 RN 코드를 네이티브 뷰로 변환한 다음 렌더링을 수행하기에 유저에게 네이티브와 같은 환경을 제공한다. Facebook과 Instagram 등이 RN으로 개발된 유명한 앱이다.
RN의 동작 원리는 RN이 가상 DOM을 통해 DOM을 조작하지 않는다는 점을 제외하고는 React와 실질적으로 동일하다. 직렬화, 비동기, 일괄 처리 브릿지를 통해 네이티브 플랫폼과 통신하며 종단 장치에 직접 개발자가 작성한 자바스크립트를 해석하는 백그라운드 프로세스로 실행된다. React 구성 요소들은 React의 선언형 UI 패러다임과 자바스크립트를 통해 기존 네이티브 코드를 감싸고 네이티브 API와 통신한다. 이렇게 함으로써 새 개발자 팀을 위한 네이티브 앱 개발을 가능하게 하며 기존 네이티브 팀들이 훨씬 더 빠르게 작업할 수 있도록 한다.
RN은 웹개발과는 다르게 HTML이나 CSS를 사용하지 않고, 자바스크립트 쓰레드로부터의 메시지를 사용하여 네이티브 뷰를 조작한다. RN은 개발자들이 안드로이드용 자바/코틀린, ios용 오브젝티브-C/Swift와 같은 언어로 작성한 네이티브 코드와 인터페이스가 가능하도록 브릿지를 제공하므로 더 많은 유연성을 제공한다.
React Native VS Flutter
React Native 장점
- 배우기 쉽다! : JavaScript 기반 언어이고, React의 규칙이 동일하다는 등의 이유로 배우기 쉽다는 장점이 있다. 이번 프로젝트에 같이 FE 개발을 진행하는 팀원이 개발경험이 전무했기에 배우기 쉽다는 점도 우리가 RN을 선택한 이유중 하나이다. Flutter의 경우 Dart는 배우기 쉬운 언어이고 Java, C#과 유사하지만 Flutter외에는 잘 쓰지 않는 언어이다.
- Codepush : Codepush는 RN 개발자들이 앱스토어 승인 과정을 반복적으로 거치지 않고도 애플리케이션을 업데이트 할 수 있도록 한다. RN앱의 경우 기본적으로 JS를 실행하는 iOS 혹은 Andriod 앱이기 때문에 개발자는 앱을 다시 빌드하고 제출하는 대신 그냥 JS 파일을 다운로드하도록 해 앱이 실행중인 JS를 대체할 수 있어서 짧은 시간동안 새로운 기능을 테스트할 수 있는 것이다. 플러터는 실제로 실행하는 코드를 네이티브 바이너리로 컴파일하기 때문에 플러터를 업데이트 하려면 실제로 유저가 실행 중인 바이너리를 교체해야 한다. 즉 앱을 다시 컴파일 한 후 앱스토어 다시 제출해야 한다.
React Native 단점
- 서드파티에 의존해야 한다 : Flutter의 경우, 라우팅 / 서버사이드 렌더링 / 이미지 압축 / 탐색 / 번역 / 다크모드 / 테마 / 애니메이션 등의 기능이 이미 있고, 구현된 여러 컴포넌트들도 제공하기 때문에 편리하나 RN의 경우 서드파티 패키지를 설치하거나 직접 코드를 작성해야 한다는 단점이 있다. 꽤나 큰 단점이다 ..
그럼에도 내가 RN을 선택한 이유! 라고 한다면 "React를 다뤄봤기 때문"이 가장 크다. 백엔드 팀원들이 자바 개발자로 구성되어 있지만 우리팀 모든 개발자들이 객체 지향 프로그래밍에 익숙하지도 않고 개발이 처음인 프론트 팀원도 있기 때문에 RN으로 결정했다. 추후 시간이 된다면 Flutter도 배워보면서 RN과의 차이점, 장단점을 비교해 보아도 재밌을 것 같다.
