3. [RN] Hello world! 띄우기

맥북도 옛날 버전이라 한번 키는 것도 오래 걸리는 듯 하다... ios 하나 띄우는데 베터리 10퍼 잡아먹는다니..

 

오늘은 hello world 띄워보려고 한다.

 

App.js 를 만지는 것으로 설정은 끝이 난다.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

class App extends Component{
  render(){
    return (
      <View>
        <Text>hello world</Text>
      </View>
    )
  }
}

export default App;

화면이 잘 보인다.

 

import React,{Component} from 'react';

의 문장에 대해 파악해보자.

'react'라는 모듈에서 Component 라는 클래스를 import 한 것이다.

 

class App extends Component{

이때, 임포트된 Component를 상속하는 App이라는 클래스를 만든 것이다.

 

이 앱이라는 화면 안에는 화면을 렌더링 해줄 수 있는 render()라는 함수가 있고, 그 안에서 리턴되는 것들이 화면을 구성한다.

  render(){
    return (
      <View>
        <Text>hello world</Text>
      </View>
    )
  }

 

 

끝.