[React] React, ReactNative, Flutter(feat. 네이티브 앱, 크로스 플랫폼)

프론트엔드 개발자 공고를 찾다보면 React, ReactNative, Flutter를 볼 수 있다.

HTML, CSS, JS를 공부하면 프론트엔드 개발자로 일 할 수 있지 않을까? 라고 생각 할 수 있지만 그렇다면 저 3개는 도대체 무엇일까?

자세한 React에 대한 설명은 다른 글에서 더 자세히 다루는 것으로 하고 3가지에 대해 간단한 비교를 통해 알아보도록 하자!

React?

💡 페이스북에서 만든 프론트엔드 JavaScript 라이브러리입니다.

React-Native?

💡 React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크입니다.

 

우선 react와 react native 둘의 공통점은 둘다 js 언어기반 이기에 문법이 같다. 그리고 react를 사용하던 유저라면 react에서 자주쓰이는 hook 이라거나 리덕스 context api 등 모든 기능들을 리액트 네이티브에서도 사용가능하다.

차이점은?

React Native 코드를 실행하게 되면 Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근 할 수 있게 한다.

• 화면 출력을 React 는 ReactDom을 사용하지만 React Native는 AppRegistry 사용

React

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React Native

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

• 두개 다 JSX 문법을 사용하지만 React는 HTML문법을 사용하지만 React Native는 HTML 문법을 사용하지 않음

React

import React from 'react';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <h1>React</h1>
        Hello React!
      </div>
    );
  }
}

React Native

import React from 'react';
import {View, Text} from 'react-native'; 

class HelloMessage extends React.Component {
  render() {
    return (
      <View>
        <Text>React-Native   Hello React-Native!</Text>
      </View>
    );
  }

• React-Native는 기존의 CSS를 지원하지 않습니다.

 

flexbox를 이용한 레이아웃 제작을 제공합니다.

 

 

비슷하지만 다른 react 와 react native를 비교해 봤다.

그러면 이제 react nativce 와 flutter를 비교해보겠다.

Flutter와 React Native는 기본적으로 모바일 크로스플랫폼이다.

그렇다면 모바일 크로스플랫폼은 무엇일까? 네이티브 앱이라는 개념과 비교하여 알아보자

네이티브 앱

💡 모바일 기기에 최적화 되어 있는 모바일 앱, 안드로이드와 ios와 같은 각 플랫폼에 특정 프로그래밍 언어를 사용하여 만들어진 앱 안드로이드: 코틀린, 자바 ios: 스위프트, objectivce-c

 

네이티브 앱의 장점

속도가 빠르고 안정적이다, 다양한 퍼포먼스를 구현할 수 있어 사용자 경험의 질을 높이는데 유리하고, 모바일 OS에서 제공하는 블루투스, 위치기반 서비스, 앱 결제, 디바이스 전체에 액세스 할수 있는 여러 장점이 있다.

네이티브 앱의 단점

네이티브 앱은 안드로이드와 iOS의 호환이 불가능하여 앱을 각각 따로 제작해야 해서 개발 비용이나 시간이 2배로 소요된다.

 

크로스 플랫폼 앱

💡 한 가지의 개발 언어와 프레임워크로 안드로이드, ios 앱을 만드는 개발 방식 네이티브 코드가 아닌 다른 개발 언어로 코드를 작성 후 각각의 OS가 이해할 수 있는 코드로 컴파일 한 후, 각각의 OS의 엔진으로 실행하는 방식 ex) 플러터, 리액트 네이티브, 자마린

 

크로스 플랫폼 앱의 장점

크로스 플랫폼 앱은 한 가지의 코드로 2가지 플랫폼 앱을 모두 개발할 수 있다는 점에서, 개발 시간과 비용을 줄일 수 있다.

크로스 플랫폼 앱의 단점

기존 네이티브 앱이 가지고 있는 동적인 요소 퍼포먼스를 100%  구현할 수 없는 단점이 있다.

플러터는 구글에서 개발한 다트 프레임워크를 사용하고 있다. skia 그래픽 라이브러리와 C/C++ 엔진을 사용한다. 따라서 네이티브 플랫폼과 프레임워크 사이에 추가적인 커뮤니케이션과 변환이 필요하지 않으며 더 빠른 성능을 보장한다.

리액트 네이티브 아키텍처는 JS Bridge로 불리는 자바스크립트 런타임 환견을 기반으로 하며 페이스북에서 개발한 FLUX 아키텍처를 사용한다. JS Bridge는 자바스크립트 모듈과 네이티브 플랫폼 간의 커뮤니케이션을 생성하고 런타임 중에 코드를 네이티브 코드로 컴파일합니다. 이 때문에 성능에 영향을 주는 CPU와 메모리의 사용량이 더 높다.

그래서 언제 뭘 써야해?

💡 리액트 네이티브는 간단한 크로스플랫폼 애플리케이션을 만드는 데 적합하고, Flutter는 MVP 애플리케이션을 만드는 데 탁월하다.

 

아래에 해당된다면 리액트 네이티브를 선택하세요.

· 크로스플랫폼 모듈을 통해 현재 애플리케이션을 확장하고 싶습니다.

· 아주 가벼운 네이티브 애플리케이션을 개발하는 것이 목표입니다.

· 비동기 빌드와 반응형 UI로 애플리케이션을 만들고 싶습니다.

· 프로젝트에 투자할 시간이 충분합니다.

 

아래에 해당된다면 플러터를 선택하세요.

· 개발하려는 앱이 네이티브의 모든 기능을 필요로 하지 않는 경우

· 예산과 납기 일정이 촉박합니다.

· 더 빨리 개발하여 빠르게 시장에 출시하고 싶습니다.

· 60FPS ~ 120FPS의 성능이 필요합니다.

· 위젯과 약간의 테스트만으로도 커스텀 UI를 만들고 싶습니다.