react-native 요약 정리

yb·2021년 5월 13일

Expo react native react-native 기초

React-Native 란

하이브리드 모바일(?) 어플리케이션 프레임워크

react-native-web 또는 react-native-windows를 통해 web 과 windows에 대해서도 개발이 된다.. 이는 브릿지로 구성되어있기 때문..!

아키텍쳐

이미지 출처 : https://medium.com/@Kelset/the-react-native-re-architecture-ab7219850d4f

New React Native Architecture Explained 번역
위의 글을 참조

React-Native 어플리케이션은 실제 모바일에서 JSC 실행환경 위에서 Native View 또는 기능을 브릿지를 통해 제어

정적타입 체크를 위해 (flow 또는 TypeScript)를 사용하면 CodeGen에서 인터페이스 파일들을 정의
이를 통해 CodeGen이라는 툴을 통해 JS 와 Native 언어 간의 호환을 자동화
JSI(JavaScriptInterface)를 통해 js-native의 상호작용을 돕는다.
FABRIC을 통해 UI를 담당하며, 영역 간의 단계를 줄임으로 속도를 향상
TURBO MODULES는 Native사이드와 상호 작용하는 구현체
기존 Native Module은 앱이 시작할때 initialized되어야하는데,
Turbo Modules은 모듈이 필요할때 불러오게 변경되었다.

장단점

장점1. 생산성 및 코드 재사용 용이

react를 통해 컴포넌트 단위로 개발

장점2. 다양한 라이브러리(모듈) 지원

커뮤니티를 통해 웬만한 기능은 제공한다.
react-native 내에서 제공되는 API는 아래의 링크를 통해 확인할 수 있다.

React-Native APIS

장점3. EXPO를 통해서 Mac이 아닌 환경에서도 iOS 빌드가 가능하다.

(EXPO 프로젝트가 아닌 경우에는 안됨!)
이부분은 아래의 EXPO에서 추가적으로 설명한다.

장점4. 실시간 개발

로컬 서버를 통해 일련의 빌드과정없이 변경사항을 단말기에서 확인할 수 있다.

장점5. CodePush를 통한 실시간 배포

MicroSoft에서 제공하는 CodePush를 확인.

단점1. 라이브러리 문제

1) 원하는 기능에 대해 라이브러리가 제공하지 않는 경우, 확장 개발하여 사용해야한다.
2) 사용하던 라이브러리의 패치가 중단되는 경우가 발생할 수 있음.

단점2. Native에 비해서 성능 차이

RN으로 게임을 만드는 것은 부적합하다.
게시판 정도의 웹 정도로 사용하기에는 적합

요약 정리

Netflix 또는 라프텔 처럼 여러 플랫폼(Android, iOS, Windows 등)에서 제공해야하는 경우에 대해서 RN(하이브리드 소스)의 장점을 극대화 할 수 있다.
특히,생산성(코드재사용)과 QA(품질 관리)에 대해서 말할 수 있다.

예를 들면,
공통적으로 적용되는 로직에 대해서는 하나의 라이브러리를 통해서 재사용이 가능하며,
문제가 발생되는 경우 한 곳에서 수정(여러 곳을 수정해야한다면 잘못짠 코드일 가능성이 크다)하여 CodePush를 통해 일련의 심사과정없이 바로 패치가 된다.

참고

RIDI :: 네이티브 앱 -> 리액트 네이티브 전환 그리고 1년후

EXPO

그게뭔데?

React 앱을 위한 프레임워크 또는 플랫폼

기본적으로 React-Native를 사용한다.

React-Native랑 무슨 차이야?

회원가입이 필요합니다.
Expo는 JavaScript(TypeScript)로만 작성됩니다.
프로젝트를 생성하였을때, RN과 다르게 Android,ios 폴더를 제공하지 않습니다.(Native 확장X)
Windows에서 iOS 배포가 가능합니다.
별도의 SDK를 통해서 버전을 관리합니다.

지원되는 API 확인하러가기

Expo를 실제로 사용해보지 않았기때문에, 간단하게만 짚고 넘어가도록하겠습니다.

정리

제작하려는 앱이 간단한(지원 API내) 기능만을 사용하는 경우
Expo가 좀더 적합하다고 볼 수 있습니다.

하지만, 라이브러리에 대한 확장이나 수정이 필요한 경우
해당 프로젝트를 ejecting을 통해 RN프로젝트로 변경하여 개발하여야 합니다.

React-Native 프로젝트 분석

아래의 커맨드를 통해 프로젝트를 생성합니다.

mkdir rn-workspace # 워크 스페이스 폴더 생성
cd rn-workspace # 이동
npm init -y # 프로젝트 생성
npm i create-react-native-app # create-react-native-app 설치
npx react-native init my-react-app # 프로젝트 생성

안드로이드 빌드 정보

ext {
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        ndkVersion = "20.1.5948944"
    }

iOS 빌드 정보
target sdk: ios 10.0

앱스토어에 배포가능한 타겟으로 생성됨.

폴더

_tests_ : 테스팅 관련
android: android 프로젝트
ios: xcode 프로젝트
그외 설정파일

index.js 내 프로그램 시작점

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

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

AppRegistry의 registerComponent를 통해 컴포넌트를 등록할 수 있다.

간단 예제

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
...

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.message, styles.warning]}>SomeText</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginLeft: 20,
    marginTop: 20,
  },
  message: {
    fontSize: 18,
  },
  warning: {
    color: 'yellow',
  },
});

특징1. react-native 내에서 모듈(컴포넌트)을 불러와서 사용해야한다.
특징2. style은 StyleSheet를 통해서 작성해야 한다.

추가 포인트

네비게이션(라우팅)과 종속 데이터(앱 종료시에도 사라지지않는 데이터)는 아래의 패키지를 참조한다.

네비게이션 관련

react-navigation

react-navigation-stack

react-navigation-tabs

데이터 관련

@react-native-async-storage/async-storage

디버깅 커맨드

npm run ios
npm run android