React Native 기본 코드(Hellow World 실행 화면 출력하기)

반응형

React Native 기본 코드(Hellow World 실행 화면 출력하기)

// index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

index.js에서 AppRegistry. registerComponent 앱네임에 앱 파일을 등록해서 처음 실행되는 진입점을 설정한다.

App.js파일에 진입하게 되면 export한 App 컴포넌트가 실행된다.

 

// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
 render() {
   return (
     <View style={styles.container}>
          <Text>Hello World </Text>
     </View>
   );
 }
}
const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#fff',
   alignItems: 'center',
   justifyContent: 'center',
 },
});

React를 import하는 이유

import React from ‘react’;

js, jsx파일 확장자를 가진 파일이기 때문에 필수로 입력해준다.

react-native를 import하는 이유

import {StyleSheet, Text} from ‘react-native’;

react native의 UI 컴포넌트 라이브러리이다.

export default와 Component를 상속하는 이유

export default class App extends React.Component

export란 내보내기를 의미한다. 다른 파일에서 현재 파일의 컴포넌트를 import(불러오기)하기 위해서는 해당 컴포넌트를 export해주어야 한다.

​

- export default vs export name

export default: 한 모듈당 export default는 한 개만 넣어준다.

export name: 한개든 여러개든 상관없다.JSX 문법의 특징

​

Component를 상속하는 이유는 리액트에서 제공하는 기능을 사용할 수 있게 한다. Component클래스 안에는 동적인 데이터를 다루는 state와 JSX를 반환하는 render() 함수 등이 있어 함수를 직접 정의하지 않았지만 리액트 컴포넌트를 상속 받았기 때문에 사용 가능하다.

UI 컴포넌트와 render함수 그리고 StyleSheet컴포넌트

class 내부를 보면 View와 Text라는 UI component를 사용한다.

View로 Text를 감싸는 이런 형태는 JSX 표현식중 하나이다.

​

render 함수는 UI에 표시할 DOM tree를 반환한다. 컴포넌트 내부에 또 다른 컴포넌트들이 들어갈 수 있고 클래스형 컴포넌트에서는 무조건 render로 감싸주어야한다.

​

StyleSheet 컴포넌트를 이용해서 스타일 지정한다. 스타일을 render에서 떨어뜨려 놓으면 코드를 좀 더 쉽게 이해할 수 있다. Create를 통해 container라는 ID를 만들어서 참조할 수 있다.

​

실행 화면

반응형