우재성
React Native
Flutter
목적
• 우리에게 필요한 기술인가?
• RN를 사용하는 우리에게 플러터란?
• RN, 플러터 특징 살피기
리액트 네이티브
• 대중적인 크로스플랫폼 앱 개발 프레임워크 중 하나
• 페이스북의 지원을 받음
• 하나의 코드로 Android, IOS 동시 개발을 진행하기 위해 태어남
• React, Javascript를 알면 개발 진행이 가능
RN 아키텍처
RN 장점
RN 단점
• 네이티브 앱에 퍼포먼트 하락
플러터
• 신생 크로스플랫폼 앱 개발 프레임워크 중 하나
• 구글의 지원을 받음
• 하나의 코드로 Android, IOS 동시 개발을 진행하기 위해 태어남
• Dart 언어를 알면 개발 진행이 가능
플러터 아키텍처
플러터 장점
• 퍼포먼스가 네이티브 앱에
비해 꿇리지 않는다.
• 레이아웃 구성이나 다이나믹
UI 구현이 쉽다.
플러터 단점
• 커뮤니티가 아직 그렇게 크지 않음
• 지원되는 라이브러리가 적다
• Web버전에서 잔버그가 많다
• 앵귤러의 악몽?
적용사례
Flutter
텐센트
알리바바
이베이
BMW
네이버 블로그
React Native
페이스북
월마트
인스타그램
리디북스
윅스
퍼포먼스
리스트뷰
대용량 변화이미지 대용량 변화이미지
공통점
• One Source Multi Platform 지향
• 플러터는 Widget, RN은 Component라는 기본 단위를 사용
• 개발 초기세팅이 쉽다
RN 코드 예시
플러터 코드 예시
출처
http://blog.wishket.com/%ED%94%8C%EB%9F%AC%ED%84%B0-vs-%EB%A6%AC%EC%95%A1%ED%8A%B8-
%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-2021%EB%85%84%EC%9D%98-%EC%8A%B9%EC%9E%90%EB%8A%94/
https://levelup.gitconnected.com/flutter-vs-react-native-comparing-the-features-of-each-framework-f61bfd146a90
http://blog.wishket.com/%EF%BB%BF%ED%94%8C%EB%9F%AC%ED%84%B0-vs-%EB%A6%AC%EC%95%A1%ED%8A%B8-
%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-vs-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-
%EC%84%B1%EB%8A%A5%EC%9D%B4-%EB%8D%94-%EC%9A%B0/
https://progdev.tistory.com/23

More Related Content

PPTX
Travis-ci를 이용한 CI/CD와 도커를 이용한 Jenkins for Android 구성하기
PDF
어플리케이션 및 웹 개발
PPTX
하이브리드앱
PPTX
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
PPTX
하이브리드 앱_개발_개요
PPTX
하이브리드 앱 개발 개요
PPTX
Hybrid App
PDF
하이브리드 앱(Hybrid App)
Travis-ci를 이용한 CI/CD와 도커를 이용한 Jenkins for Android 구성하기
어플리케이션 및 웹 개발
하이브리드앱
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
하이브리드 앱_개발_개요
하이브리드 앱 개발 개요
Hybrid App
하이브리드 앱(Hybrid App)

What's hot (11)

PDF
모바일앱개발 교육자료
PDF
2018 GDG 인천 DevFest GoogleAndroidDevSummit
PPTX
경영과 정보기술 - 어플리케이션 디자인 과제
PPTX
2018 Google I/O extended Busan flutter session
PPTX
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
PDF
C1 하이브리드 앱 어떻게 개발해야 하나
PDF
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
PPT
기획1팀
PDF
XE Open seminar #2 - keynote
PDF
Android Developer JeongJaeyun
PDF
01_시작하기
모바일앱개발 교육자료
2018 GDG 인천 DevFest GoogleAndroidDevSummit
경영과 정보기술 - 어플리케이션 디자인 과제
2018 Google I/O extended Busan flutter session
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
C1 하이브리드 앱 어떻게 개발해야 하나
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
기획1팀
XE Open seminar #2 - keynote
Android Developer JeongJaeyun
01_시작하기
Ad

Similar to RN vs Flutter (20)

PDF
[D2CAMPUS] Tech meet up ; iOS 개발편
PDF
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
PDF
격변하는 프로그래밍 언어, 이제는 Let it go
PDF
K모바일발표 111026 하이브리드ux_배포용
PDF
델파이 @22
PDF
Open API - 웹 플랫폼 생태계를 만드는 기술 (2011)
PDF
Robotics in community
PPTX
How to implement your dream 20150427
PPTX
모바일 크로스플랫폼 비교 - 월간슬라이드 4월
PDF
오픈 소스와 독점소프트웨어 : 그 이해와 전략적 활용
PDF
차세대 웹비즈니스를 위한 "HTML5"
PDF
기술 관심 갖기: 스타트업 기술 101 (Interested in Tech?: Startup Technology 101)
PDF
31기 고지웅 "구글오픈소스"
PPT
조재완
PDF
오픈소스의 이해
PDF
백엔드 개발자로 1인분하기
PDF
공개SW와 개발방법론(오픈소스 성공요인 사례)
PDF
Goorm
PDF
클라우드 IDE, 구름 프로젝트 | Devon 2012
PDF
초고속 웹사이트 개발을 위한 Codeigniter PHP Framework
[D2CAMPUS] Tech meet up ; iOS 개발편
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
격변하는 프로그래밍 언어, 이제는 Let it go
K모바일발표 111026 하이브리드ux_배포용
델파이 @22
Open API - 웹 플랫폼 생태계를 만드는 기술 (2011)
Robotics in community
How to implement your dream 20150427
모바일 크로스플랫폼 비교 - 월간슬라이드 4월
오픈 소스와 독점소프트웨어 : 그 이해와 전략적 활용
차세대 웹비즈니스를 위한 "HTML5"
기술 관심 갖기: 스타트업 기술 101 (Interested in Tech?: Startup Technology 101)
31기 고지웅 "구글오픈소스"
조재완
오픈소스의 이해
백엔드 개발자로 1인분하기
공개SW와 개발방법론(오픈소스 성공요인 사례)
Goorm
클라우드 IDE, 구름 프로젝트 | Devon 2012
초고속 웹사이트 개발을 위한 Codeigniter PHP Framework
Ad

More from Wonjun Hwang (20)

PDF
20250822_Kit-Works Tram Study_Spring Actuator.pdf
PDF
20250822_Kit-Works Team Study_함께자라기-1.pdf
PDF
20250802 _ TOSS MAKERS CONFERENCE 25.pdf
PDF
20250725_Kit-Works Team Study_GOOGLE I_O 2025.pdf
PPTX
20250725_Kit-Works Team Study_Spring AI.pptx
PPTX
20250718_Next.js를 떠나는 개발자들: 비판과 대안 프레임워크 분석.pptx
PDF
Kit-Works Team Study_20250718_자바의-enum.pdf
PDF
Kit-Works Team Study_Vibe Coding 도전해보기.pdf
PPTX
Kit-Works Team Study_브라우저 검색 과정_20250704_손문수.pptx
PDF
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
PDF
Kit-Works Team Study_20250627_기술 부채_김경수.pdf
PPTX
20250530_Kit-Works Team Study_결제, 너 믿어도 될까.pptx
PPTX
20250620_Kit-Works Team Study_jspecify.pptx
PDF
20250523_Kit-Works Team Study_윤정빈_놓치고 있던 웹 접근성.pdf
PPTX
20250523_Kit-Works Team Study_Exception.pptx
PPTX
Kit-Works Team Study-20250517_uuid_김한나.pptx
PDF
Kit-Works Team Study_20240517_장현정_Claude에서MCP사용해보기.pdf
PDF
Kit-Works Team Study_아직도 Dockefile.pdf_김성호
PDF
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
PDF
Kit-Works Team Study_공허참,부존재증명,트러블슈팅.pdf
20250822_Kit-Works Tram Study_Spring Actuator.pdf
20250822_Kit-Works Team Study_함께자라기-1.pdf
20250802 _ TOSS MAKERS CONFERENCE 25.pdf
20250725_Kit-Works Team Study_GOOGLE I_O 2025.pdf
20250725_Kit-Works Team Study_Spring AI.pptx
20250718_Next.js를 떠나는 개발자들: 비판과 대안 프레임워크 분석.pptx
Kit-Works Team Study_20250718_자바의-enum.pdf
Kit-Works Team Study_Vibe Coding 도전해보기.pdf
Kit-Works Team Study_브라우저 검색 과정_20250704_손문수.pptx
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Kit-Works Team Study_20250627_기술 부채_김경수.pdf
20250530_Kit-Works Team Study_결제, 너 믿어도 될까.pptx
20250620_Kit-Works Team Study_jspecify.pptx
20250523_Kit-Works Team Study_윤정빈_놓치고 있던 웹 접근성.pdf
20250523_Kit-Works Team Study_Exception.pptx
Kit-Works Team Study-20250517_uuid_김한나.pptx
Kit-Works Team Study_20240517_장현정_Claude에서MCP사용해보기.pdf
Kit-Works Team Study_아직도 Dockefile.pdf_김성호
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_공허참,부존재증명,트러블슈팅.pdf

RN vs Flutter

Editor's Notes

  • #4: 크로스 플랫폼은 여러가지에서 쓰일 수 있는 용어. 게임, 엔진, 소프트웨어 등 여러가지가 해당되는데 좀 더 상세히 표현하기위해 여기서는 크로스플랫폼 앱 개발 프레임워크라고 표기했습니다.
  • #5: 비즈니스 로직은 Javascript로 구동되고 랜더링되는 부분이 jsBridge를 통해 네이티브 로직을 구동한다. 이 과정에서 jsBridge가 훌륭한 다리역할을 해주었지만 반대로 메모리등 자원과 시간을 먹는 원인이 된다.
  • #6: 많은 사람들이 rn의 장점으로 진입장벽을 꼽습니다. 확실히 많은 웹개발자들이 네이티브 앱 개발하기 위해 새로운 학습을 하지 않아도 되는 것은 강점으로 잡힙니다. 또한 기존 네이티브 앱 개발자가 플랫폼별로 개발자가 필요하였지만 하나의 업무로 통합되면서 조직구조가 편해집니다. 리액트 네이티브를 채용하면서 리액트를 채용하게 되고 폭넓은 라이브러리, 리덕스, 훅 등의 리액트의 장점을 고스란히 가져오게 됩니다.
  • #7: 리액트와 javascript는 단점으로도 많이 꼽습니다. 기존의 네이티브 앱 개발자들은 새로운 학습을 해야합니다. 또한 오히려 앱만의 고유기능이 추가될 경우 자바스크립트 개발자가 네이티브 개발을 진행해야 할 수 있습니다. 네이티브 앱에 비해 퍼포먼스가 하락하게 됩니다.(발열, 속도, 리소스 사용 등)
  • #9: 플러터의 경우는 내부에 랜더링 엔진(skia)을 가지고 있어 즉시 랜더링이 가능하여 RN에 비해 랜더링속도가 빠르다.
  • #10: 웹에 대한 기본적인 제반 지식이 필요하긴 하지만 우선 다트언어만 활용할 줄 알면 개발 진행이 가능하다. Widget을 만들고 이벤트를 연결해주는것이 dart가 됬을 뿐이다. (html마크업이나 javascript를 쓰지않는다) 다트언어는 java와 유사한 구조를 가지고 있습니다. 구글에서 지원이 계속 이루어지고 있습니다. Ui 구현이 매우 쉽다. (레이아웃 구성이나 다이나믹 ui 구현이 쉬운듯합니다) 하나의 소스로 android, ios, web 전부 호환이 가능합니다.
  • #11: 플러터에 대한 진입장벽은 다트라는 생소한 언어 사용이 아닐까 합니다. 아직도 남아있고 늘어나는 수많은 이슈들이 단점으로 꼽힐것같습니다.
  • #13: 이외에도 몇가지 테스트가 있었으며 알고리즘 테스트의 경우나 뷰 로딩의 경우 RN보다 Flutter가 적게는 2배 많게는5배 정도의 성능차를 보여주었습니다.
  • #14: 공통점은 다양한 플랫폼 환경 지향 android, ios 동시개발 진행 명칭만 다른 기본단위로 구성되어 있음