[React-Native 공식문서] 1. Core Components And Native Components

https://reactnative.dev/docs/intro-react-native-components

Core Components and Native Components

React Native는 리액트와 native app 기능을 사용하여 안드로이드와 iOS 앱을 제작할 수 있는 오픈소스 프레임워크다. React Native를 쓰면, React Component에서 javascript를 통해 플랫폼 API에 접근하여 UI의 표현과 동작을 만들 수 있다. 이번 장에서는 React Native에서 component들이 어떻게 동작하는지 살펴보자

 

Views and mobile development

안드로이드와 iOS 개발에서 View 는 UI의 기본 블록이다. 아래 그림의 직사각형은 텍스트, 이미지를 보여주거나 유저인풋에 반응할 수 있는 것들이다. 하나의 View가 자식 View를 가질 수도 있다.

Native Components

안드로이드 개발할 때는 Kotlin, Java를 사용하고 iOS 개발할 때는 Swift, Objective-C를 사용한다. React Native에서는 자바스크립트를 통해 native로 개발한 view들을 실행시킬 수 있다. 런타임 시점에, React Native는 해당 컴포넌트에 해당하는  Android, iOS view 들을 만들어준다. React native 컴포넌트는 안드로이돵 iOS와 같은 외형을 제공하기 때문에, React Native 앱은 다른 앱들과 같은 look and feel을 제공해준다. 이 컴포넌트들을 우리는 Native Component라 부른다.

 

React Native는 지금 앱 제작을 시작할 수 있도록 필수적인 Component를 제공합니다. 이것들이 React Native의 Core Component입니다.

 

React Native는 당신이 필요한 native component를 만들도록 지원해준다. 커뮤니티를 통해 우리는 꾸준히 개발해 나가고 있다.
( https://reactnative.directory/ )

 

Core Components​

React Native는 form control부터 activity indicator 까지 다양한 Core Component를 제공합니다.

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

const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}

export default App;

 

React Native는 React Component와 같은 API 구조이기 때문에, React component api에 대한 이해를 가지고 있어야 한다. 다음 섹션에서 리액트에 대해 설명할 것이다. 리액트에 이미 친숙하다면 넘어가도 좋다.