전편에 플러터의 구동 원리를 봤는데 플러터 엔진을 지나서 트리를 만들어 캔버스에 그린다고 했다.
핫한 언어 리액트 네이티브와 연결지으며 플러터를 사용할 수 있는 환경을 더 이해해보자.
좀 중구난방식으로 쓸 터이니 관심있는 주제만 골라 보길 추천한다.

Flutter vs React Native OverView

Flutter :

• 개발 언어: Dart, 생소한 언어로 러닝 커브 높음
• UI 라이브러리: 자체 UI 라이브러리인 Flutter 위젯을 사용
• 플러터 네이티브 컴포넌트 사용: 사용자 인터페이스를 위해 네이티브 컴포넌트 대신 자체적으로 구축한 위젯 사용
• 성능: 네이티브 수준의 성능을 제공하며, 프레임워크 자체가 모든 렌더링을 관리하므로 빠르고 부드러운 애니메이션을 구현하기 용이
• 핫 리로딩: 애플리케이션 개발 중 실시간으로 변경사항을 반영할 수 있는 핫 리로딩 기능 제공
• 커뮤니티: 큰 개발자 커뮤니티와 활발한 생태계가 형성되어 있음. RN보단 작음

React Native :

• 개발 언어: JavaScript, React 기반, 익숙한 언어로 러닝 커브 낮음
• UI 라이브러리: React 컴포넌트를 사용하여 UI 구축
• 운영 체제 네이티브 컴포넌트 사용: 네이티브 플랫폼의 UI 컴포넌트를 사용하여 인터페이스를 구성
• 성능: 네이티브 앱에 비해 성능이 다소 떨어질 수 있으며, JavaScript와 네이티브 간의 통신 오버헤드가 있을 수 있음
• 핫 리로딩: 리액트 네이티브 패키지를 다시 빌드해야 하므로 핫 리로딩이 Flutter보다 번거로울 수 있음
• 커뮤니티: 큰 개발자 커뮤니티와 성숙하고 활발한 생태계가 형성되어 있으며, 리액트 생태계와의 통합을 통해 써드파티의 다양한 리소스와 라이브러리를 활용할 수 있음

실행 방식의 차이

Flutter :

Flutter는 플랫폼 별로 UI를 직접 그리기 때문에 네이티브 컴포넌트와 직접 상호작용하지 않음. 대신 Flutter 엔진이 UI를 렌더링하고 운영 체제에 그려짐. 이로 인해 모든 플랫폼에서 동일한 UI와 동작을 제공할 수 있음.

React Native :

React Native는 네이티브 컴포넌트와 상호작용하여 UI를 구성. JavaScript 코드는 리액트 네이티브 브릿지를 통해 운영 체제와 통신하고, 네이티브 모듈을 호출하여 기능을 실행. 이로 인해 플랫폼 별로 더 많은 운영 체제 API와 기능을 활용할 수 있음.

컴파일 전략의 차이

Flutter :

• AOT 컴파일: Flutter는 Dart 언어를 AOT 컴파일하여 네이티브 기계 코드로 변환. 애플리케이션을 빌드하기 전에 코드가 미리 컴파일되므로 실행 시간에 높은 성능을 제공.
  이는 Flutter 앱이 빠르게 시작되고 반응성이 우수하며, 애니메이션 및 그래픽 처리에 탁월한 성능을 보여줌.

React Native :

• JIT 컴파일: React Native는 JavaScript 코드를 JIT 컴파일하여 실행 시점에 동적으로 컴파일. 애플리케이션을 실행하는 동안 코드를 인터프리터로 해석하고 프로파일링 정보를 수집하여 최적화된 코드를 생성.
  이는 React Native 앱의 개발 및 반복 속도를 빠르게 유지하면서도 실행 시간 성능을 향상.

AOT 컴파일은 Flutter 앱의 성능과 반응성을 높이는 장점을 가지고 있지만, 앱의 크기가 더 커질 수 있다.
반면에 JIT 컴파일은 React Native 앱의 개발 속도를 높이는 장점을 가지고 있지만, 앱의 시작 속도나 실행 시간 성능은 상대적으로 AOT 컴파일에 비해 약간 떨어질 수 있다.

따라서, Flutter는 AOT 컴파일을 통해 높은 성능을 제공하면서도 크로스 플랫폼 앱 개발을 강조하고, 강력한 핫 리로딩을 지원한다.
반면에 React Native는 JIT 컴파일을 통해 빠른 개발 속도와 크로스 플랫폼 호환성을 강조한다. 핫 리로딩을 제한적으로 지원(핫 리스타트)한다.

이러한 점들이 RN과 Flutter를 고르는 근거들 중 하나가 될 것이다.

어떤 상황에서 어떤 프레임워크를 써야할까?

크로스 플랫폼 개발은 빠른 개발과 시장 출시를 가능하게 하며 효율적인 개발이 가능하다.

리액트 네이티브를 선택하는 근거

리액트 네이티브는 JS(리액트)의 접근성, 재사용성이 있고 써드파티 등의 큰 생태계를 통해 개발 생산성을 늘려준다. 그래서 간단한 크로스 플랫폼 애플리케이션 개발에 탁월하다.
하지만 운영 체제 네이티브를 반영해서 개발해야되기 때문에 복잡한 앱일수록 운영 체제 네이티브에 대한 이해도가 많이 필요하고, 성능 상으로 네이티브 언어보다 문제가 생길 수도 있다.

• 현재 개발된 애플리케이션을 확장하고 싶을 때
• 가벼운 네이티브 애플리케이션을 개발하는 것이 목표일 때
• 비동기 빌드와 반응형 UI로 앱을 개발하고 싶을 때
• 프로젝트에 충분한 시간을 투자할 수 있을 때

플러터를 선택하는 근거

Flutter는 운영 체제 네이티브 수준의 고성능을 요할 때나 UI 디자인을 커스텀할 수 있는 자유도로 고성능의 개성적인 MVP 애플리케이션을 만드는 데 뛰어나다.
하지만 운영 체제 네이티브와 비교했을 때 디자인이 좀 떨어질 수도 있고, Dart라는 언어를 배워야한다는 거 자체가 부담이 될 수도 있다.

• 네이티브의 모든 기능이 필요하지 않은 앱을 개발하려는 경우
• 예산과 납기 일정이 제한적인 경우
• 신속한 개발과 빠른 시장 출시가 중요한 경우
• 60FPS ~ 120FPS의 고성능이 필요한 경우
• 위젯과 간단한 테스트로도 커스텀 UI를 만들고 싶은 경우

---

내가 생각했을 때 가장 큰 근거는 RN은 리액트 쿼리 같은 써드파티를 사용할 수 있어 좋고, Flutter는 앱, 웹 등 모두 공통적인 UI를 짤 수 있어서 좋다.

근데 RN은 복잡한 앱일수록 코드 구조가 진짜 더 복잡해지고, 더러워지는 느낌이고, Flutter는 짜증나는 코드 가독성과 자꾸 맘대로 안되면 던지는 구글의 전과가 있는 단점이 제일 큰 거 같다.