React Native 로 앱 만들기 (4) - React Native 의 컨셉 이해하기

React Native의 기본적인 특징은 무엇일까?

바로 더이상 div, html , span ....등등 이 없다는 것이다.

그 말은!

우리는 return 할 component가 정해져 있다는 뜻이다. 

이것을 React Document 에서 확인할 수 있다.

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 I am genuius lovely Dyong and love bread!!!!! </Text>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});

위의 코드는 앞서 생성한 프로젝트의 App.js 이다.

맨 처음 import 부분을 살펴보면 

react를 import 하고 react-native 를 import 하면서, 특정한 component 들을 import 한다.

그 다음으로 class 내부를 보면 div 나 span 이 사용되지 않았다. 

여기서는 view 라는 component 를 사용하고 있다.

React Native 의 component 는 모바일 환경에 따라 native 하게 매핑된다.

이 말은, view component 를 사용하면 iOS/Android 환경에 따라 object-c 또는 java 로 변한다는 말이다.

https://facebook.github.io/react-native/docs/components-and-apis.html

위의 사이트에서 사용할 수 있는 component 들을 확인 할 수 있다.

snack expo 라는 tool 이 있다.

https://snack.expo.io/

이 tool 을 사용하면 별도의 다운로드 설치 없이 브라우저에서 코드를 테스트 해 볼 수 있다.

snack 은 codepen 처럼 코드를 작성하고 공유할 수도 있다. (https://codepen.io/)

여기서 코드를 수정하고 Tab to Run 을 눌러 각 환경에 맞게 어떻게 component 가 변화하는지 볼 수 있다.

우측 하단에 보면 Android/iOS 를 선택 할 수 있는 tab 이 있다.

같은 코드가 환경에 따라 어떻게 바뀌는지를 확인해보자.

이렇게 환경에 따라 React Native 코드는 바뀌기 때문에 내가 return 할 수 있는 값은 view, text 와 같은 특정 component 들이며,

웹과 달리 h1, div, span, paragraph 등은 사용할 수 없다.

예를 들어 위의 코드가 React 코드였다면

<Text>Hello I am genuius lovely Dyong</Text>

이 부분이 

<div>Hello I am genuius lovely Dyong</div>

이렇게 쓰였어도 아무 문제가 없었을 것이다. 하지만 React Native 에서는 지정된 component 형식으로 return 되어야 하기 때문에

에러를 뱉을 것이다. 한 번 확인 해보자.

또는 

Hello I am genuius lovely Dyong

이렇게 글자만 입력해보자.

<Text> Component 로 렌더되어야한다고 에러 메세지가 뜨는 것을 볼 수 있다.

html 은 잘못된 코드를 집어넣어도 에러메세지가 뜨지 않고 동작하는 반면에 React Native 는 에러를 바로바로 출력해주기 때문에 확인이 용이하다.

이번엔 style 부분을 살펴보자.

React Native 의 디자인이 flexbox 로 가능하다는 것을 알 수 있다.

이것은 앱의 레이아웃을 css 를 사용해서 디자인 할 수 있다는 뜻이다. 최고의 조합이다!

objective-c 또는 swift 로 레이아웃을 짜려면 상당히 복잡하다.

android studio, java 도 마찬가지로 복잡하다. 그렇기 때문에 이 조합은 최고인 것이다!

이 부분을 자세히 보면, 여기서 style 이라는 object 를 만들고 있다.

그리고 StyleSheet 를 만든다. 간단히 view 에 style container 를 붙이고 있는 것이다.

요약 !

1. React Native 를 사용하기 위해서는 'react-native' 를 import 해야한다.

2. html 과 다르게 component 형식으로 render 해서 return 해준다.

3. css 와 비슷한 style 이 있다.