Core Component and Native Components ?

React Native ?

React Native는 Android IOS을 React 와 App Native 기능을 사용해서 개발을 할수 있는 open framework 입니다.

React Native는 Javascript로 접근이 가능하고 UI는 React Component을 사용합니다.

 

Views and mobile development

안드로이드 및 IOS 개발에 있어서 view는 화면에서 text , image 또는 사용자에게 이벤트를 받을수 있는 UI의 기본 구성 요소입니다.

 

Native Components

Android 개발자에게는 Java , Kotlin , IOS 개발자에게는 Swift , Objective-c 사용하지만

React Native는 Javascript을 사용하여 React Component 통해 view를 적용할수 있습니다.

런타임 시에 React Native는 Android , IOS 해당 하는 view를 생성합니다.

따라서 Android IOS는 다른 앱 처럼 느낌이 비슷하게 보입니다. 왜냐하면 실제로는 Native Component을 호출하고 있기 때문입니다.

 

ReactNative는 앱에 특수한 조건에 맞게 Android IOS를 Native Component로 구성할수가 있습니다.

그리고 ReactNative는 component를 기부하는 community가 활발하게 활동을 하고 있습니다. 

Native Directory을 통해서 무엇이 생성되고 있는지 확인해 보세요!

 

Core Components

React Native는 수 많은 Core Component을 가지고 있고 해당 내용은 링크를 통해 확인할수가 있습니다.

다음은 가장 많이 사용을 하는 Core Component을 설명해드리도록 하겠습니다.

 

 

React Native	Android	IOS	WEB	설명
<View>	<ViewGroup>	<UIView>	A non-scrollling <div>	이 View는 Flexbox , style , touch를 다루고 그리고 컨트롤을 할수가 있습니다.
<Text>	<TextView>	<UITextView>	<p>	Text을 표시할 때 주로 사용을 하고 touch 이벤트도 다루고 있습니다.
<Image>	<ImageView>	<UIImageView>	<img>	Image 표시할수가 있습니다. Displays different types of images
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	View안에 많은 다른 View가 포함이 될때 스크롤을 할수가 있습니다.
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자로부터 Text를 입력받을수가 있습니다.

 

React Native는 React Component와 같은 API 구조를 가지기 때문에 먼저 React Component API을 이해하고 있어야합니다.

그래서 다음 내용에서는 해당 내용을 설명드리도록 하겠습니다.

 

마지막으로는 간단한 예시입니다.

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

export default function 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>
  );
}