3.React Native App.js와 JSX

지난 글에서는 프로젝트를 시작하기 앞서 init 프로젝트의 구조, 프로젝트 실행 시 디버그 서버 실행에 대한 내용을 간략하게 알아봤습니다.

이번 시간에는 App.js의 render() 함수에 XML처럼 들어가있는 JSX 문법과 기본 컴포넌트(Basic Component)를 알아보겠습니다.

1.JSX

우리는 이전에 App.js의 render() 함수에서 JSX를 본 적 있습니다.
JSX는 <태그> </태그>의 모양으로, 컴포넌트를 열어주는 부분< >과 닫아주는 부분</ >으로 이루어져 있습니다.

* 태그를 열었으면 꼭 닫아주셔야 에러가 나지 않습니다.

XML 혹은 HTML을 다뤄보셨다면 낯이 익으실텐데요.

만약 이러한 형식을 처음 접하신다면, 검색 혹은 이곳에서 간단하게 HTML을 체험해 보는게 좋을 것 같습니다.

(코딩을 처음해보시는 분도 따라할 수 있는 튜토리얼을 지향하지만 현 시점에서 모든 것을 짚기엔 내용이 방대해지기에 추후에 별도 섹션을 만들어 놓도록 하겠습니다.)

그렇다면 이걸 왜 쓰는걸까요?

간단히 정리하자면  JSX 문법을 사용함으로써 가독성과 편의성을 높일 수 있습니다.

App.js의 render()를 JSX를 사용하지 않은 모습과 함께 비교해보겠습니다.

render() {
    return (
      React.createElement(View, {style: styles.container},
        React.createElement(Text, {style: styles.welcome}, 'Welcome to React Native!'),
        React.createElement(Text, {style: styles.instructions}, 'To get started, edit App.js'),
        React.createElement(Text, {style: styles.instructions}, instructions)
      )
    );
  }

<JSX를 사용하지 않았을 때>

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }

<JSX를 사용했을 때>

JSX를 사용하지 않는다면, 마치 dom을 직접 조작하듯이 React.createElement()를 통해 코드 형식으로 컴포넌트를 생성해야 합니다.

언뜻 보기엔 비슷비슷 해보이나요?

이번엔 좀 긴 예제를 보겠습니다.

render() {
    return (
      React.createElement(View, {style: styles.container},
        React.createElement(View, {style: styles.padArea}),
        React.createElement(View, {style: styles.titleArea},
          React.createElement(FlexText, {fontSize: 30}, '우리 아이의 똑똑한 친구\n지능형 스마트토이')
        ),
        React.createElement(View, {style: styles.imageArea},
          React.createElement(Image, {
            style: styles.image,
            source: require('CapsuleProject/images/main1.jpg')
          })
        ),
        React.createElement(View, {style: styles.btnArea},
          React.createElement(RectButton, {
            onPress: () => this._push("join"),
            bgColor: "#444",
            title:"회원가입"
          }),
          React.createElement(RectButton, {
            onPress: () => this._push("join"),
            bgColor: "#444",
            title:"로그인"
          })
        )
      )
    );
  }

render() {
    return (
      <View style={styles.container}>
        <View style={styles.padArea} />
        <View style={styles.titleArea}>
          <FlexText fontSize={30}>
            우리 아이의 똑똑한 친구{'\n'}
            지능형 스마트토이
          </FlexText>
        </View>
        <View style={styles.imageArea}>
          <Image style={styles.image} source={require('CapsuleProject/images/main1.jpg')}/>
        </View>
        <View style={styles.btnArea}>
          <RectButton
            onPress={() => {this._push("join")}}
            bgColor={"#444"}
            title={"회원가입"}/>
          <RectButton
            onPress={() => {this._push("login")}}
            bgColor={"#444"}
            title={"로그인"}/>
        </View>
      </View>
    );
  }

어떠신가요? 긴가 민가 한 부분도 있지만 JSX를 사용하는 편이 어떤 컴포넌트가 사용됐는지 눈에 확 들어오고, 어떤 컴포넌트 안에 어떤 컴포넌트가 들어있는지 보기 쉽습니다.

JSX안에서 Javascript 객체(값)을 사용하기 위해서는 {}로 감싸주어야 합니다.

또한 태그(Component) 안에 style=, onPress= 같은 것들은 속성(Attribute)라고 부를 수 있는데,

이는 다음 글에서 React 컴포넌트의 데이터(model)를 다루는 인자인 State와 Props와 함께 사용법을 알아보겠습니다.

그런가보다 하고 넘어간다

2.기본 컴포넌트

React Native는 

1.View 

2.Text 

3.Image 

4.TextInput 

5.ScrollView 

6.StyleSheet

를 기본 컴포넌트(Basic Component)로 가지고 있습니다. 공식문서에서 확인하실 수 있습니다.

컴포넌트란 '화면을 구성하는 단위'로써 크게 기본 컴포넌트와 커스텀 컴포넌트로 나눌 수 있습니다.

(일전에 리액트는 컴포넌트 단위로 되어있다고 언급한 바 있습니다.)

기본 컴포넌트는 화면을 구성하는 기본적이고 필수적인 요소입니다.

이름을 통해 유추할 수 있듯이 View는 화면, Text는 글자, Image는 그림을 나타냅니다.

스케치북 역할을 하는 View에 Text, Image 등을 붙여서 화면을 그리는 것 입니다.

같은 컴포넌트를 어떻게 사용하냐에 따라 여러가지 커스텀 컴포넌트, 혹은 다양한 화면을 구성할 수 있습니다.

이런 느낌이랄까..?

React Native 앱에 '안녕하세요' 라는 글자를 화면에 보여주고 싶다면 스케치북 View를 깔고 Text컴포넌트를 붙여줍니다.

<View>
    <Text>안녕하세요</Text>
</View>

이렇게 말이죠!

3.App.js 훑기

JSX를 사용하기 위해서는 React를 import 하여야 합니다. React가 JSX를 자바스크립트 형태로 변환해주기 때문이죠.

또한 React Native에서 제공하는 컴포넌트를 사용하고 싶다면 해당 컴포넌트를 import해야 합니다.

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

App.js의 최상단에 작성된 이 코드를 통해 React와 기본 컴포넌트를 import 하게 됩니다.

만약 Image 컴포넌트를 사용하고싶다면 import {Platform, StyleSheet, Text, View, Image} from 'react-native'; 식으로 추가해주시면 됩니다.

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

Platform은 android와 ios를 구분지을 때 사용할 수 있습니다. 이를 응용하여 각 기기의 특색에 맞는 디자인, 컴포넌트를 적용할 수 있습니다.

위와 같이 사용하면 instructions에 ios 혹은 android 기기에 해당하는 내용이 들어갑니다.

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to React Native!</Text>
      <Text style={styles.instructions}>To get started, edit App.js</Text>
      <Text style={styles.instructions}>{instructions}</Text>
    </View>
    );
  }
}

type Props = {};는 props의 type을 정의해 주는 것으로, 비교적 자료형에 제약이 없는 자바스크립트에서 자료형을 제한해줄 때 사용합니다.

JAVA의 generic 기능과 유사하다고 볼 수 있습니다.

나중에 자세히 알아보도록 합니다.

export default는 특정 변수(함수, 클래스 등)를 외부에서 사용할 수 있도록 해줍니다. (모질라 형님들의 친절한 설명)

App.js는 index.js에서 참조되고 있습니다.

이 구조를 유심히 본다면 우리가 만든 App.js라는 컴포넌트가 어떤식으로 다른곳에서 사용될 수 있는지 예상할 수 있습니다.

App이라고 선언된 클래스는 React의 Component를 상속(extends) 받고 있습니다.

상속이란 부모 클래스(여기선 React의 Component)가 가지고 있는 변수와 함수들을 가져다 쓸 수 있게 하는것 입니다.

이해가 잘 안되시는 분들은'클래스'와 '상속'이라는 키워드로 검색해보세요!

간단하게 말하자면, 사용자가 아무렇게나 Asdf라고 이름지은 클래스라도

class Asdf extends Component{ }라고 React의 Component를 상속받으면, React Native 앱에서 사용할 수 있는 컴포넌트가 된다는 뜻입니다.

어우 길다 길어..

아무튼 이 Component를 상속받은 App.js(App클래스)는 이 render() 함수를 호출할 수 있고, 여기에 작성된 컴포넌트들이 화면에 그려지게 됩니다.

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,
  },
});

마지막 StyleSheet입니다.

StyleSheet는 컴포넌트들의 색상, 정렬, 크기, 높이 등 스타일(디자인)을 맡고있습니다.

css와 유사한 형태이며, StyleSheet.create()로 생성한 스타일은 모듈 내에 독립적으로 관리됩니다.(다른 모듈과 스타일 이름이 겹쳐도 상관없다는 말입니다! 와아!)

4.딱 하나 유의할 점!

render() 함수 return 부분의 가장 겉 부분은 하나의 컴포넌트로 덮여있어야 합니다.

render() {
    return (
      <View>
        <Text>안녕하세요</Text>
      </View>
      <View>
        <Text>반갑습니다</Text>
      </View>
    );
  }

이런 모양이 아니라

render() {
    return (
      <View>
        <View>
          <Text>안녕하세요</Text>
        </View>
        <View>
          <Text>반갑습니다</Text>
        </View>
      </View>
    );
  }

이렇게 덮여있어야 한다는 뜻 입니다.

그렇지 않으면 빨간 화면을 보시게 됩니다.

5. 요약

* JSX는 XML과 HTML과 유사

* 컴포넌트를 JSX 문법으로 사용

* JSX는 꼭 닫아주어야 함 < >, < />

* JSX안에서 Javascript 객체(값)을 사용하기 위해서는 {}로 감싸주어야 합니다.

* 컴포넌트에 값(함수 등)을 전달할 때는 <Button onPress={} style={} /> 같이 작성 (props와 state는 다음 글에서)

* 컴포넌트를 만들때는 React의 Component를 상속받아 작성

* render()에 작성되는 내용이 화면에 그려짐

* 가장 겉 부분을 하나의 컴포넌트로 덮어줘야함!

6. 마치며

일단 따라해보자 하고 시작한 분들에게는 굉장히 지루하고 답답한 시간이였을거라 생각합니다.

그래도 여기까지 오셨다니 존경의 박수를 보냅니다 짝짝짝!

딱 한번만 더 힘내시길 바라겠습니다.

이제 React가 데이터를 다룰때 사용하는 State와 Props 까지만 알아보고,

이후부터는 지루한 이론은 때려치고 실제로 앱을 만들어보도록 하겠습니다.

Comming Soon!