[React Native] 리액트 네이티브(react native) overview

Hello world로 리액트 네이티브 맛보기

기본적인 구성을 살펴보기 위하여, Hello world를 띄워보도록 하겠다.

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

위의 코드에서

      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>

부분을 살펴보겠다.

이것은 JSX 형식이다. 자바스크립트 내에 xml을 포함시키는 형식이다. 일반적인 web에서의 <div> <span> 대신 리액트 네이티브에서는 <View> <Text> 를 사용한다. <Text>는 텍스트를 built-in 하는 컴포넌트이며, <view>는 웹에서의 <div> 나<span>의 역할을 한다.

위의 JSX를 포함하고 있는 export deault class인 HelloWorldApp은 임의로 만들어 준 하나의 컴포넌트이다. 저런식으로 컴포넌트들을 만들어서 이어붙이는 것이다. 컴포넌트 생성 시, render 함수만 포함해주면 된다. render안에는 JSX가 들어간다.