RN의 실행

일단 React Native 공식 홈페이지 을 보고, 설치를 한후 따라하길 바란다.

react-native gitbookTest 을 터미널에 실행하여 새 프로젝트를 만든다. 그 다음 실행을 해보면

이런 창이 뜨면 실행 완료 입니다. ios로 실행을 했기 때문에 폴더에 있는 index.ios.js 가 실행 되게 됩니다.

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

class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('gitbookTest', () => gitbookTest);

이런 소스 코드입니다. 처음에는 React와 ReactNative 라이브러리를 가져옵니다.

그 다음 gitbookTest 라는 클래스를 생성하는데 Component을 상속받아서 만듭니다. 이 Component는 위의 react에서 가져온 것 입니다. 우리는 Component을 상속받아서 gitbookTest 라는 또다른 Component을 만들게 됩니다.(잘 이해가 안가시면 상속의 개념을 검색해서 찾아보시길 바랍니다)

이 Component가 실제로 화면에 보여질 때 에는 render함수의 return값 만이 보이게 됩니다. 여기서 보면

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );

이 부분 이겠죠. 여기서 RN에서는 return 값은 1개의 컴포넌트밖에 가질 수 없습니다. 그렇기 때문에 항상 전체를 View로 감싸주는 편이 좋습니다. 예를 들어

    return (
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
    );

이 경우에는 return이 3개의 Text 컴포넌트가 되기때문에 에러가 됩니다.

실행된 화면을 보면 이 부분이 화면에 나타났다는 것을 알 수 있습니다. 여기서 글자를 바꾸어서 다시 실행 또는 command+R 을 입력하시면 바뀐 글자로 나타나는 것을 알 수 있습니다.

우리는 계속 style 이라는 property가 component 안에 있는 것을 알수 있는데요,

        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>

여기서의 style 부분 입니다. {styles.welcome} 이라는 값을 가지고 있습니다. 여기서 괄호안({ })은 return 안에서는 component값이기 때문에 어떠한 js코드의 값이나, 코드를 실행시키기 위해서는 이부분이 js라는 것을 알려주어야 하는데 괄호안에 부분을 js 코드로 인식합니다.

그렇기 때문에 {styles.welcome}은 js 코드에서의 styles.welcome 을 의미 하는 것이지요. 만약 괄호가 없다면 js code로 인식하지 않고 단순한 string으로 인식하게 될 것입니다(정확히는 string으로 인식하기 위해서는 "styles.welcome" 따옴표(")을 써주어야 하겠지만요)

그렇다면 이 styles라는 객체는 어디에 정의가 되었을까요?

바로 맨 밑 부분

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

여기에 정의가 되어있습니다. styles는 StyleSheet라는 것에 의해 만들어 졌는데요 StyleSheet는

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

'react-native' 에서 가져왔군요.

그렇다면 style.welcome은

welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }

이러한 object 라는 것을 알 수 있습니다. 여기서는 fontSize, textAlign, margin 값이 정의 되어있군요. 여기서 fontSize를 100으로 바꾸고 command+R을 통해 재실행을 하면 welcome이 커진것을 확인할 수 있습니다. 그렇다면 우리는 여기에 어떠한 style속성들을 정의할 수 있을까요? 그건 react-native-Text-docs을 확인하시면 됩니다. 나중에 어떠한 style을 만들고 싶을때 참고하시면 되겠죠?

그리고 마지막의

AppRegistry.registerComponent('gitbookTest', () => gitbookTest);

의 부분이 있습니다. 이건 index.ios.js, index.android.js 에 밖에 없는 부분인데요. 실제로 어플이 실행될 때 어떤 화면을 처음에 실행을 해주는 지를 설정해주는 부분 입니다.

즉 'gitbookTest'라는 어플이 실행될때, gitbookTest라는 컴포넌트를 실행시켜주세요 라는 것 입니다. gitbookTest라는 컴포넌트는 우리가 지금까지 계속 보았던 컴포넌트이죠.

style의 정의한 부분 위에 test2라는 컴포넌트를 추가해봅시다.

class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

class test2 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>test2 Component</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

이렇게 말이죠. 그 다음에

AppRegistry.registerComponent('gitbookTest', () => test2);

Appregistry 의 gitbookTest을 test2로 바꾸어서 결과를 보면 test2 컴포넌트가 실행된 것을 알 수 있습니다. 이제 RN에 대해 감이 잡히시나요? 다음에는 flexbox에 대해 설명을 해보도록 합시다.