React-Native - The Basics

최근에 React-Native로 프로젝트를 하면서 공식문서를 제대로 읽어보지 못한 것이 아쉬워서 이번에 공식문서를 천천히 살펴보려합니다.

Core Components and Native Components

React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 안드로이드 및 iOS 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. React Native를 사용하면 JavaScript를 사용하여 플랫폼의 API에 액세스할 뿐만 아니라 재사용 가능하고 중첩 가능한 코드 묶음인 React 컴포넌트를 사용하여 UI의 모양과 동작을 설명할 수 있습니다.

Views and mobile development

Android 및 iOS 개발에서 뷰는 UI의 기본 구성 요소로, 텍스트, 이미지를 표시하거나 사용자 입력에 응답하는 데 사용할 수 있는 화면의 작은 직사각형 요소입니다. 일부 종류의 보기는 다른 보기를 포함할 수 있습니다.

Native Components

• Android 개발에서는 Kotlin 또는 Java로 뷰를 작성합니다.
• iOS 개발에서는 Swift 또는 Objective-C를 사용합니다.
• React Native를 사용하면 React 컴포넌트를 사용하여 자바스크립트로 뷰를 호출할 수 있습니다.

런타임에 React Native는 해당 컴포넌트에 해당하는 Android 및 iOS 뷰를 생성합니다. 리액트 네이티브 컴포넌트는 안드로이드 및 iOS와 동일한 뷰로 지원되기 때문에 리액트 네이티브 앱은 다른 앱과 같은 모양, 느낌 및 성능을 갖습니다. 우리는 이러한 플랫폼 지원 컴포넌트를 Native Component라고 부릅니다.

리액트 네이티브는 바로 사용할 수 있는 필수 네이티브 컴포넌트 세트와 함께 제공되어 바로 앱 빌드를 시작할 수 있습니다. 이것이 바로 React Native의 핵심 컴포넌트입니다.

React Native를 사용하면 앱의 고유한 요구사항에 맞게 안드로이드 및 iOS용 네이티브 컴포넌트를 직접 빌드할 수 있습니다.

Core Components

React Native에는 많은 핵심 컴포넌트가 있습니다. API 섹션에서 모두 문서화되어 있습니다. 주로 다음 핵심 컴포넌트로 작업하게 될 것입니다:

 

<View>	<ViewGroup>	<UIView>	<div> 스크롤 X	플렉스박스, 스타일, 일부 터치 처리 및 접근성 컨트롤이 있는 레이아웃을 지원하는 컨테이너
<Text>	<TextView>	<UITextView>	<p>	텍스트 문자열을 표시, 스타일 지정 및 중첩하고 터치 이벤트까지 처리합니다.
<Image>	<ImageView>	<UIImageView>	<img>	다양한 유형의 이미지 표시
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	여러 컴포넌트와 뷰를 포함할 수 있는 일반 스크롤 컨테이너
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자가 텍스트를 입력할 수 있습니다.

Handling Text Input

TextInput은 사용자가 텍스트를 입력할 수 있는 핵심 컴포넌트입니다. 여기에는 텍스트가 변경될 때마다 호출할 함수를 받는 onChangeText 프로퍼티와 텍스트가 제출될 때 호출할 함수를 받는 onSubmitEditing 프로퍼티가 있습니다.

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

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text
          .split(' ')
          .map(word => word && '🍕')
          .join(' ')}
      </Text>
    </View>
  );
};

export default PizzaTranslator;

Using a ScrollView

ScrollView는 여러 컴포넌트와 보기를 포함할 수 있는 일반적인 스크롤 컨테이너입니다. 가로 속성을 설정하여 세로 및 가로로 스크롤할 수 있습니다.

ScrollView는 pagingEnabled 프로퍼티를 사용하여 스와이프 제스처로 뷰를 페이징할 수 있도록 구성할 수 있습니다. 뷰 사이를 가로로 스와이프하는 제스처는 ViewPager 컴포넌트를 사용하여 안드로이드에서도 구현할 수 있습니다.

iOS에서는 단일 항목이 있는 스크롤뷰를 사용하여 사용자가 콘텐츠를 확대/축소할 수 있습니다. 최대 줌 스케일 및 최소 줌 스케일 소품을 설정하면 사용자가 핀치 및 확장 제스처를 사용하여 확대 및 축소할 수 있습니다.

ScrollView는 크기가 제한된 소수의 사물을 표시하는 데 가장 적합합니다. ScrollView의 모든 요소와 뷰는 현재 화면에 표시되지 않더라도 렌더링됩니다. 화면에 맞지 않는 긴 항목 목록이 있는 경우 대신 FlatList를 사용해야 합니다.

Using List Views

React Native는 데이터 목록을 표시하기 위한 컴포넌트를 제공합니다. 일반적으로 FlatList or SectionList를 사용하게 될 것입니다.

FlatList 컴포넌트는 변화하는 데이터의 스크롤 목록을 표시하지만 구조는 비슷합니다.

• **FlatList는 시간이 지남에 따라 항목 수가 변경될 수 있는 긴 데이터 목록에 적합합니다.**
• 일반적인 스크롤뷰와 달리, FlatList는 모든 요소를 한 번에 표시하지 않고 현재 화면에 표시되는 요소만 렌더링합니다.

FlatList 컴포넌트에는 data와 renderItem이라는 두 가지 프로퍼티가 필요합니다. data는 목록의 정보 소스입니다. renderItem은 소스에서 하나의 항목을 가져와 렌더링할 형식화된 컴포넌트를 반환합니다.

논리적 섹션으로 나뉜 데이터 집합을 렌더링하려면 SectionList를 사용하는 것이 좋습니다.

Platform-Specific Code

크로스 플랫폼 앱을 구축할 때는 가능한 한 많은 코드를 재사용하고 싶을 것입니다

Platform module

React Native는 앱이 실행 중인 플랫폼을 감지하는 모듈을 제공합니다.

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

key가 'ios' | 'android' | 'native' | 'default' 중 하나가 될 수 있는 객체가 주어지면 현재 실행 중인 플랫폼에 가장 적합한 값을 반환하는 Platform.select 메서드도 사용할 수 있습니다. 즉, 휴대폰에서 실행 중인 경우 ios 및 android 키가 우선적으로 사용됩니다. 이를 지정하지 않으면 native 키가 사용된 다음 기본 키가 사용됩니다.

Detecting the Android version

안드로이드에서는 플랫폼 모듈을 사용하여 앱이 실행 중인 안드로이드 플랫폼의 버전을 감지할 수도 있습니다. 버전은 안드로이드 OS 버전이 아닌 안드로이드 API 버전으로 설정됩니다.

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

Detecting the iOS version

iOS에서 버전은 운영 체제의 현재 버전이 포함된 문자열인 -[UIDevice systemVersion]의 결과입니다.

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

---

React Native의 공식 문서의 The Basics를 읽어보았는데, React Native 핵심 컴포넌트가 무엇이고, 어떻게 쓰여지는지 그리고 List View는 어떤 상황에 어떤 것을 사용해야 하는지 알 수 있었습니다.

이번 프로젝트가 끝이나면 회고를 써보려고 하는데 그 전에 공식문서를 읽어나가며 더 좋은 환경을 만들 수 있도록 노력해보도록 하겠습니다.