[SSAFYcial] Flutter VS React Native 그것이 문제로다!

 

 

안녕하세요! 

이번 기사는 모바일 프로젝트를 진행하면서 알게 된,

Flutter VS. React Native 에 대한 내용입니다 !!  

 

바로 시작합니다 !! 

 

Flutter 

Flutter는 Dart라는 언어를 사용하는 Google에서 만든 Open Source UI Tool Kit 입니다. 진입장벽이 낮은 편이라 Dart를 익히는 데에 긴 시간이 필요하지 않습니다. 저도 이번 공통 프로젝트에 Flutter를 사용하게 됐는데, 배운 기간에 비해 구현할 수 있는 것들이 상당히 많아지고 있습니다!!

 

좌) Flutter, 우) Dart

 

Flutter의 장점

장점 1. Hot Reload : 코드를 수정하고 나서 애플리케이션을 다시 시작하지 않아도 수정 사항을 실시간으로 에뮬레이터를 통해 확인할 수 있습니다. 만드는 어플의 규모가 커질수록 재시작의 시간이 오래 걸리는데, Hot Reload 기능 덕분에 코드 수정과 작성에 있어서 시간이 많이 절약되고 있습니다. 

장점 2. 우수한 성능 : Flutter를 사용해 앱을 만든다면 Dart 언어가 네이티브 코드로 컴파일 되기 때문에, 추가적인 계층 없이도 안드로이드나 iOS와 직접 통신할 수 있습니다. 그래서 성능 문제가 상대적으로 적으며 앱의 시작 시간도 짧은 편입니다. 또한 Flutter에는 안드로이드와 iOS에서 제어 가능하고 동일한 동작을 제공하는 자체 렌더링 엔진을 가지고 있습니다. 

 

Flutter의 단점

단점 1. 앱의 큰 크기 : 장점 2는 사실 장점이자, 단점입니다. 모든 플랫폼에서 일관되게 작동하는 자체 렌더링 엔진을 가지고 있기 때문에, 다른 프레임워크를 이용해 앱을 만들었을 때보다 훨씬 더 커지게 됩니다. 

단점 2. 자료의 부족 : 공식 문서가 잘 되어있지만 개발을 하면서 많은 오류를 만날 때 한계에 금방 다다릅니다. Flutter는 React Native에 비해 역사가 짧은 기술이라 도움이 필요할 때 찾을 수 있는 자료의 양이 상대적으로 적습니다. 

 

 

React Native

React Native는 JavaScript 언어와 React를 사용해 네이티브 앱을 만들 수 있는 페이스북에서 개발한 Open Source Framework입니다. JavaScript에 익숙한 개발자들은 React Native가 더 쉬울 수 있지만, 초보자라면 Flutter에 비해 상대적으로 배우는 시간이 오래 걸릴 수 있습니다. 하지만 방대한 자료와 라이브러리의 가용성 측면에서는 React Native가 Flutter보다 우세합니다.

 

좌) React Native , 우) JavaScript

 

React Native의 장점

장점 1. Live Reload : React Native 또한 Flutter와 마찬가지로 변경된 코드를 즉시 화면으로 볼 수 있습니다. 

장점 2. 방대한 커뮤니티 자료 : React Native는 Flutter에 비해 아주 오래된 역사를 가지고 있기 때문에 구글링으로도 쉽게 원하는 자료와 답변을 얻을 수 있습니다. 또한 다양한 라이브러리를 제공하기에 여러가지 화면 구성을 하는 데에 어려움이 적습니다. 

 

React Native의 단점

단점 1. 높은 의존성 : 장점 2는 단점이기도 합니다. React Native의 다양한 라이브러리를 사용하게 되면, 그만큼 Third-Party 라이브러리에 의존하게 됩니다. 그런데 최근 Flutter가 화두가 되면서 React Native의 라이브러리 업데이트가 종료되는 경우가 많습니다. 그러면서 유지 보수와 기존 프로그램의 업데이트가 어려워지고 있습니다. 

단점 2. 상대적으로 낮은 성능 : 네이티브 코드로 컴파일 되는 Flutter와 다르게, React Native는 네이티브 모듈과 통신하기 위해 JavaScript Bridge를 사용하기 때문에 비교적 성능이 낮습니다. 

 

 

Flutter VS. React Native 코드 비교 

Flutter Code

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Text('Hello, Flutter!'),
    );
  }
}

 

React Native Code

import React from 'react';
import { Text, View } from 'react-native';
const HelloWorldApp = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
}
export default HelloWorldApp;

 

 

개인적인 생각

  공통 프로젝트를 모바일 분야로 하게 되면서, 처음보는 Flutter라는 프레임워크와 Dart라는 언어를 갑자기 공부하게 됐습니다. 하지만 Dart의 쉬운 구조의 문법 덕분인지 금방 적응해서 프로젝트에 전념하고 있습니다. 확실히 React Native는 JavaScript가 익숙했다면 사용하기 좋았겠지만, 익숙치 않은 제게는 무리였을 것 같습니다. 아직 Flutter 도입이 된 기업이 적기 때문에 취업에는 도움이 크게 되지는 않겠지만, 이렇게 빨리 배우고 빨리 적용하는 도전이 제게는 나중에 큰 경험으로 다가오지 않을까 하는 마음입니다!! 

 

  공통 프로젝트 마무리까지 아자아자 화이팅~!!