Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2019 GDG DevFest Seoul - React Native와 Flutter를...

Dora Lee
October 20, 2019

2019 GDG DevFest Seoul - React Native와 Flutter를 고민하는 개발자분들께

이번에 2019 GDG DevFest Seoul 에서 "React Native와 Flutter를 고민하는 개발자분에게" 라는 발표로 주제한 이상훈입니다!

RN과 Flutter를 두고 어떤 플랫폼을 사용하셔야 할지 고민하시는 분들을 위해, 둘을 한번 비교해봤습니다.
기초이기 때문에, 아키텍쳐 부분 등 일부 내용은 간단하게만 언급하고 넘어갔습니다.

감사합니다!

Dora Lee

October 20, 2019
Tweet

More Decks by Dora Lee

Other Decks in Technology

Transcript

  1. 안녕하세요! 저는 로플랫이란 실내위치 인식 기술을 보유한 스타트업에서 Android /

    iOS 개발자로 일하고있는 21살 개발자 이상훈입니다. “
  2. React Native와 Flutter를 쓰는 이유 관리 측면에서는, 플랫폼 별로 각각의

    코드를 작성할 경우 > 유지보수 측면에서도 각각 관리해줘야 하지만, 하이브리드 플랫폼을 사용할 경우 하나의 코드로 여러 플랫폼을 대응할 수 있음
  3. React Native와 Flutter를 쓰는 이유 하이브리드 플랫폼 중 위 프레임워크를

    쓰는 이유는, WebView (HTML) 가 아닌, Native Platform이기 때문
  4. Flutter React Native 에 있는 ‘Bridge’ 가 없으며, 자체 UI

    렌더링 엔진으로 모든 뷰를 그림 (내부코드는 C/C++ 로 작성)
  5. Key Points 1. Github Star 2. React Native 와 Flutter

    비교 3. 성능적인 차이 4. ѐߊ੗о ѐߊೡ ٸ੄ ର੉
  6. Structure Skia (Google Chrome, Android UI Engine) 기반의 자체 UI

    엔진이 모든 위젯을 직접 그림 React Component 를 Bridge 가 Native Component 로 연결
  7. Skia (Google Chrome, Android UI Engine) 기반의 자체 UI 엔진이

    모든 위젯을 직접 그림 React Component 를 Bridge 가 Native Component 로 연결 UI 면에서 Platform, SDK에 대한 종속성이 없음 UI 면에서 Platform, SDK에 대한 종속성이 있음 Structure
  8. React Component 가 Bridge 로 Native Component 와 연결됨 일부

    컴포넌트는 Android, iOS ппী݅ ઓ੤ೞӝ ٸޙী 플랫폼 별 각각 다르게 구현해야할 경우가 발생 Structure
  9. Material (안드로이드 스타일), Cupertino (iOS 스타일) 을 선택해서 해야하고, 각각의

    스타일을 유지하기 위해서는 어쩔 수 없이 분기처리해야함 Structure
  10. Performance Native React Native Flutter Galaxy S10+ 기준 (2분간 실행)

    / 1초에 2번씩 + 버튼 누름 / Android Studio Profiler 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후
  11. Performance Native React Native Flutter 0 25 50 75 100

    실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 Galaxy Note 5 기준 (2분간 실행) / 1초에 2번씩 + 버튼 누름 / Android Studio Profiler
  12. Platform Specific Code 예를 들어 - 배터리 잔량 가져오기 -

    권한 요청하기 - 외부 앱 실행하기 등 이런 기능이 필요할 때,
  13. Platform Specific Code Android, iOS 각각 네이티브 코드를 작성하여 React

    Native 나 Flutter 에서 호출해서 사용해야함
  14. App Size Android Target, Release Build (RN latest v0.61.2 /

    Flutter latest v1.9.1+hotfix4) 빌드 도구 버전 등 크기 차이가 있을 수 있음 7.1 MB 4.5 MB
  15. App Size iOS Target, Release Build (RN latest v0.61.2 /

    Flutter latest v1.9.1+hotfix4) / Xcode 11.1 빌드 도구 버전 등 크기 차이가 있을 수 있음 24 MB 52 MB
  16. Dart Language Google 에서 만든 언어 ‘인터프리터 언어’ 가 아닌,

    ‘컴파일 언어’ 로서, 머신코드로 변경되기 때문에 빠름
  17. Language Dart Javascript UI를 HTML 태그 기반으로 설계 가능 (JSX)

    UI를 클래스 기반으로 들여쓰기 (Depth) 형태로 짬
  18. @override Widget build(BuildContext context) { final bottomPadding = MediaQuery.of(context).padding.bottom; return

    new Scaffold( key: _scaffoldKey, backgroundColor: Colors.white, body: StoreConnector<ApplicationState, ForceTouchAction>( converter: (store) => store.state.forceTouchAction, builder: (context, action) { return new Stack( children: <Widget>[ Transform.scale( scale: 1.0 + (action.pressure == 0.0 ? 0 : action.pressure / 20), child: Stack(children: <Widget>[ NotificationListener<OverscrollIndicatorNotification>( child: PageView( controller: _pagerController, physics: NeverScrollableScrollPhysics(), children: <Widget>[MainMyMaatPage(), Container()], ), onNotification: (overscroll) { overscroll.disallowGlow(); }, ), Container( alignment: Alignment.bottomLeft, child: ClipRect( child: BackdropFilter( filter: ImageFilter.blur( sigmaX: Platform.isIOS ? 20 : 0, sigmaY: Platform.isIOS ? 20 : 0), child: Container( height: 64 + MediaQuery.of(context).padding.bottom, decoration: new BoxDecoration( color: Colors.black.withOpacity(0.2)), child: Container( child: Stack( alignment: Alignment.topLeft, children: <Widget>[ StoreConnector<ApplicationState, FoodReviewedLoadingState>( converter: (store) => store .state.foodReviewedLoadingState, builder: (context, loadingState) { if (loadingState != null && loadingState.isLoading) { return new SizedBox( child: LinearProgressIndicator( backgroundColor: Colors.transparent, valueColor:
  19. Architecture : Redux 데이터가 아래처럼 한 방향으로만 흐르기 때문에 View

    & Action & Dispatcher & Store(Middleware & Reducer) & View 관리하기가 좋음 함수형 프로그래밍에 최적화 Store 에서 상태를 저장하여 UI 와 연결하여 사용
  20. Architecture : BLoC 페이지당 BLoC 하나씩 Stream 형태로 구성되어 있으며,

    API 로부터 정보를 불러오거나, DB 에서 정보 불러오기 등 가져온 데이터를 UI로 출력할 때 용이한 패턴
  21. Architecture Flutter 에서도 Redux 패턴을 사용할 순 있음. 아키텍쳐는 설계

    나름이지만, Flutter 에서는 BLoC, React 에서는 Flux 패턴을 많이 활용한다고 함
  22. 3rd-party Libraries 구글 공식 라이브러리 (예를 들어 Firebase, Camera 등)

    들이 아직 정식 버전이 아닌, pre 버전 (0 버전 때)이 많음
  23. 3rd-party Libraries 구글 공식 라이브러리 (예를 들어 Firebase, Camera 등)

    들이 아직 정식 버전이 아닌, pre 버전 (0 버전 때)이 많음
  24. 3rd-party Libraries 플러그인이 많이 존재하지 않음 요즘에야 조금씩 추가되고 있는

    상태 없어서 플러그인을 만들어야하는 경우가 은근 있음
  25. EcoSystem 문서가 은근 되어있지만, 아직 나온지 얼마 되지 않아 레퍼런스가

    부족함 문서도 정리 잘되어있고, 레퍼런스가 많음
  26. EcoSystem First-Party 라이브러리의 버전이 아직 0점대임 Third-Party 라이브러리도 얼마 없어서

    (예를 들어, 다음 지도를 Flutter 에서 사용하기 위해) 직접 네이티브 플러그인을 만들어야함
  27. Result React Native Flutter Language Javascript Dart UI Bridge 가

    시스템 컴포넌트와 연결 내부에 자체적인 위젯이 모두 구현되어 있음 Performance 네이티브 급 성능 네이티브보다 빠름 Hot Reload O O Size (Android) Hello World 기준 7MB Hello World 기준 5MB Size (iOS) Hello World 기준 24MB Hello World 기준 52MB Third-Party Libraries 많음 적음 Main Architecture Flux (ex. Redux) BLoC Platform Specific Code O O System SDK Dependency 많음 UI 쪽은 적지만, 네이티브 기능에는 많음