React Native 01~03

01. React Native란?

React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈소스 프레임워크
사용자 인터페이스(UI)를 구축하기 위한 React를 기반으로 하지만 React는 브라우저를 대상으로 하고 React Native는 모바일 플랫폼을 대상으로 함
대부분의 코드를 플랫폼 간에 공유할 수 있기 때문에 Android와 iOS 모두에서 동시에 쉽게 개발할 수 있음

리액트 네이티브의 장점

1. WebView를 사용하는 다른 크로스 플랫폼과는 다르게 실제 호스트 플랫폼의 표준 렌더링 API를 사용해서 렌더링함
   => WebView를 사용하면 성능상의 문제와 Native에서 사용하는 기본 UI 요소나 애니메이션을 Javascript, HTML 및 CSS 조합으로 모방하려고 하게에 한계가 있음
   => 타 플랫폼에서는 웹에서 만들고 그것을 앱에 임베딩해서 사용, React Native는 마크업 요소를 실제 네이티브 요소로 변환해서 사용함

2. 리액트 네이티브는 리액트와 마찬가지로 state와 props가 변경되면 React Native의 뷰를 다시 렌더링하는 것과 같이 React와 대부분의 기능이 비슷
   React Native와 React의 주요 차이점은 React Native가 HTMl 및 CSS 마크업을 사용하는 대신 호스트 플랫폼의 UI 라이브러리를 활용한다는 것

3. 크로스 플랫폼이란 이름과 같이 대부분의 비슷한 소스 코드로 iOS와 Android 모두를 위한 앱 개발을 할 수 있음. 따라서 많은 시간과 비용을 절약해서 앱을 만들 수 있음

02. Core Components & Native Components

Native Components

Android 개발에서는 Kotlin 또는 Java로 View를 작성
iOS 개발에서는 Swift 또는 Objective-C를 사용
React Native를 사용하면 React Component를 사용하여 JavaScript로 이러한 View를 호출할 수 있음
런타임 시 React Native는 해당 구성 요소에 해당하는 Android 및 iOS View를 생성. React Native 구성 요소는 Android 및 iOS와 동일한 보기에서 지원되기 때문에 React Native 앱은 다른 앱과 같은 모양, 느낌 및 성능을 제공. 이러한 플랫폼 지원 구성 요소를 Native Component라고 함

Core Components

Native Components는 누구나 각자 원하는 바에 맞게 만들 수 있음
Core Components는 리액트에서 기본으로 제공하는 Native Components
ex) <View> <Text> <Image> <ScrollView> <TextInput>...

03. 리액트 네이티브를 사용하기 위한 개발환경

리액트 네이티브를 이용하기 위한 개발 환경을 세팅하는 방법은 대표적으로 두 가지

1. Expo

• 무료로 사용하는 3rd Party 서비스. 개발을 쉽게 할 수 있도록 도와줌
• 쉬운 배포 및 버전 업데이트 Android Studio/X-code 없이 본인의 휴대폰으로 테스트 가능. 빠르고 간단한 설치 및 환경 설정
• Expo에서 제공하는 기능만 사용 가능. 모듈을 만들어서 사용 불가. native 파일 제어 불가. 간단하고 편리한 대신 복잡하고 섬세하게 제어를 못한다는 단점

2. React Native CLI

• React Team에서 만들었으며, Expo 같은 툴을 사용하지 않고 React Native만을 이용해서 개발하는 것
• 네이티브 파일 및 모듈 사용 가능. 네이티브 소스 코드 작성 가능
• Expo에 비해 편의성 부족. 사용자가 직접 기본 구성을 해야해서 시간이 오래걸림. Android Studio/X-code를 설치해서 빌드 및 배포를 해야함

11. StypeSheet를 이용한 스타일링

React Native에서는 CSS가 아닌 Javascript로 스타일링을 함

React Native에서 스타일링하는 방법

• inline styles 사용
• StyleSheet 객체 사용

StyleSheet를 이용한 스타일링이 추천되는 이유

1. 스타일링 코드를 분리해줘서 전체 소스 코드의 가독성을 높임
2. StyleSheet를 사용하면 이미 정해놓은 스타일을 캐시해주기 때문에 다시 렌더링 할 때 inline styles를 사용할 때 보다 성능이 좋음

15. React Native에서 SVG 사용하기

리액트 네이티브에서는 기본적으로 SVG 파일을 지원하지 않기 때문에 SVG를 사용하려면 설정을 해줘야 함

사용방법

react-native-svg 모듈 설치

svg 요소나 속성들을 React Native에서 사용할 수 있게 해줌

npm install react-native-svg --save

react-native-svg-transformer 모듈 설치

svg 파일을 import해서 사용할 수 있게 해줌

npm install -D react-native-svg-transformer

metro.config.js 파일 설정

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

참고: https://www.npmjs.com/package/react-native-svg-transformer

svg 다운받기

https://www.svgrepo.com/

27. Todo 리스트 나열하기

리액트 네이티브에서 리스트를 나열하기

• FlatList
• ScrollView

ScrollView는 Component가 로드된 직후 Item을 로드함. 모든 데이터가 RAM에 저장되어 한 번에 보여주기 때문에 많은 양의 데이터가 있는 경우 성능 저하기 일어남
반면에 FlatList는 10개(기본값)의 Item을 화면에 탑재하고 사용자가 보기를 스크롤하면 다른 Item이 탑재됨. 이러한 점에서 FlatList를 사용하는 것이 더 좋음

적은 수의 Item에는 ScrollView를 사용하고 많은 수의 Item에는 FlatList를 사용