1. Flutter 작동 원리
플러터는 구글에서 만든 cross-platfrom 프레임워크로, Dart 언어를 사용한다.
다른 네이티브 언어는 OS에 바로 렌더링하라 요구하는데 반에, Flutter는 Flutter Engine을 거쳐서 작동한다.
** 여기서 렌더링이란, 코드를 2D화면에 나타내는 작업
네이티브 언어나 RN은 OS에서 렌더링을 하지만, Flutter는 Flutter Engine에서 렌더링을 한다. 그래서 React Native와는 달리 어느 OS에서든 화면이 같다.
다만 flutter 자체 UI를 사용하기 때문에, 이를 손수 Native 코드로 바꾸기 어렵다는 단점이 있다.
이 때문에 Flutter는 iOS, Android, MacOS, Web(JS), 임베디드까지 작동하는 cross-platform 프레임워크로 작동할 수 있다.
2. React Native
1) 작동 원리
Flutter와는 달리, React Native는 그냥 RN 코드를 각각의 Native 언어로 번역하고, 그 사이에서 발생하는 event를 통신할 수 있게 해주는 인터페이스이다.
React Native코드는 bridge를 거쳐 각각의 Native언어로 번역되고, 그 후 각자의 OS에서 실행(렌더링)된다. 따라서 Flutter와는 와는 다르게 iOS, Android 운영체제에서 렌더링이 되기 때문에 화면이 조금씩 다르다.
예를 들어 버튼을 하나 만든다고 할 때, Flutter는 flutter engine에서 렌더링되지만 네이티브나 RN은 OS가 직접 버튼을 만든다.
2) 통신
크게 Native - Bridge - JS 구간으로 나눌 수 있다. 간단히 설명하면 Native에서 발생한 event를 bridge를 통해 JS 단으로 전송하고 처리한 다음에 업데이트 사항을 Native로 전송해 UI가 업데이트 되도록 한다.
3) 시뮬레이터가 필요한 이유
React와 비교해보면, React는 웹이기 때문에 브라우저에서 JS를 읽어서 화면에 나타내준다. 즉, 화면에 나타내주는 수단이 있는 셈이다. React 코드 -> javascript로 변환 -> Browser DOM 렌더링
그러나 React Native는 그냥 번역기이기 때문에 애플리케이션을 실행할 인프라가 필요하다. 위에 있는 RN코드-Bridge-통신할 Native 코드가 모두 있어야 화면에 나타나고, events를 발생시키고 ... 작동하는 것이다.
RN코드만으로는 앱이 작동할 수 없기 때문에 Java(android), Xcode(ios)를 모두 다운 받아야한다. 그래서 빌드 전에는 모든 인프라가 갖춰진 expo 앱에서 시뮬레이션을 할 수 있다.
3. 정리
- 플러터 엔진의 존재로 인해 flutter가 여러 os를 지원할 수 있다.
- 플러터 엔진으로 인해 RN과 달리 플러터는 os 상관없이 일정한 ui를 지원한다.
- 코드를 바로 실행하는 네이티브 언어와는 달리 flutter, react native는 중개할 모듈이 필요하기 때문에 네이티브보다 느릴 수 밖에 없다.
참고
https://flutter-ko.dev/resources/architectural-overview#architectural-layers
'CS > mobile' 카테고리의 다른 글
| 프로그레시브 웹 앱(PWA, Progressive Web App) (0) | 2024.03.11 |
|---|---|
| 네이티브 앱, 하이브리드 앱, 웹 앱 (0) | 2024.03.11 |
| [디자인 패턴] MVC, MVP, MVVM (0) | 2024.02.05 |
