리액트 네이티브의 기초 - Hello React 그리고 props 와 state

튜토리얼을 참고하면서 리액트 네이티브 학습을 시작하겠습니다.

이번 시간에는 리액트 네이티브의 기본 틀을 보고 props와 state를 보도록 하겠습니다.

 

1. Hello World

가장 기본적인 Hello World를 보는 코드입니다.

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

코드는 JS로 작성이 됩니다. RN은 ES2015(ES6-구 JS가 아닌 신 JS버전을 뜻합니다)를 지원합니다. 그렇기에 ES6로 JS 코드로 작성을 해주셔야 됩니다. 익숙지 않은 구조가 보입니다. 리액트를 학습을 하셨다면 아시겠지만 JS에서 사용하지 않는 문법인 JSX 문법이 있습니다. 리턴 안에 보시면 <View><Text>Hello, World!</Text></View> 코드가 있습니다.

JSX는 리액트(네이트브)에서 사용되는 문법으로써 JS에 XML을 사용하는 문법입니다. <View>, <Text>는 흔히 html에서 사용하는 <div>, <span> 사용하는 태그처럼 리액트(네이티브)에서 사용되는 태그들입니다.

HelloWorldApp은 컴포넌트입니다. 리액트는 컴포넌트 기반으로 코드를 작성합니다. 컴포넌트는 화면을 보여주는 하나하나의 구성입니다. 지금은 Hello World! 를 보여주는 컴포넌트입니다. 컴포넌트는 render() 함수를 필요로 하고 이는 JSX를 리턴이 됩니다.

 

2. Props

Bannas라는 컴포넌트를 만들었습니다.

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

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <Bananas />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center',
    top: 30
  },
});

RN에서 기본적으로 제공이 되는 Image 컴포넌트를 사용해서 Bananas 컴포넌트 코드를 작성하였습니다.

Bananas컴포넌트에는 pic라는 변수를 만들어서 Image에 넘겨주었는데요.

프로퍼티를 줄여서 props라고 부르는데 pic(사진을 갖고 있는 주소 값)를 source라 불리는 props로 값을 넘겨주었습니다.

Image 컴포넌트 내부에서는 source props를 내부에서 사용하여 화면에 출력이 될 것입니다.

여기서 또 알 수 있는 것이 JSX 내부에서는 변수 또는 JS문법을 " {} " 로 감싸서 사용하실 수 있습니다.

 

위에서는 props로 값을 전달을 해주었는데요.

우리의 컴포넌트를 만들어서 직접 props를 사용해보도록 하겠습니다.

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}


export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <Greeting name= "Jun"/>
      <Greeting name= "Alice"/>
      <Greeting name= "Tom"/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center',
    top: 30
  },
});

Greeting이라는 컴포넌트를 만들었습니다. name이라는 props를 사용하는 모습을 보실 수 있는데요. Greeting컴포넌트에서는 this.props.name이라는 코드를 사용해서 이름들을 출력을 해줍니다.

props는 호출하는 컴포넌트에(App)서 전달받고, 전달받는 쪽(Greeting)에서는 "this.props"로 전달받게 됩니다.

여기서 또 JSX 내부에서 {}를 씌어 JS를 사용하시는 모습도 보실 수 있으시고요. View는 스타일과 레이아웃을 잡을 때 자주 사용하는 컴포넌트입니다.

이렇게 props를 사용해주시면 컴포넌트를 다른 컴포넌트에서도 재사용하실 수 있습니다. props가 단순히 부모로부터 전달받는 데이터가 아닌 재사용을 위한 프로퍼티라는 의미도 잘 봐주세요 :)

 

3. State

리액트에서 데이터를 다루는 방법은 2가지가 있습니다. 첫 번째로는 위에서 설명드린 props와 두 번째는 이번에 설명드릴 state입니다. props 값은 부모로부터 전달받고 컴포넌트의 생명주기 동안에 값이 고정이 됩니다.

이와 다르게 변화되는 값을 다루기 위해서는 State를 사용하셔야 됩니다. 일반적으로는 state값은 생성자에서 초기화를 하고 setState() 함수를 통해서 값을 변경합니다. state값은 직접 변경하지 않습니다.

예제 코드를 보도록 하겠습니다.

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

class Blink extends Component {

  componentDidMount(){
    // Toggle the state every second
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }

  //state object
  state = { isShowingText: true };

  render() {
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <Blink text='I love to blink' />
      <Blink text='Yes blinking is so great' />
      <Blink text='Why did they ever take this out of HTML' />
      <Blink text='Look at me look at me look at me' />
    </View>
  );
}

(스타일 코드는 위와 동일합니다)

Blink 컴포넌트를 App에서 호출합니다. 이때 text props를 전달해주는 모습도 보실 수 있습니다.

state를 초기화(state = { isShowingText: true })를 해준 이후에 render가 됩니다.

컴포넌트가 마운트 된다면 componentDidMount() 함수가 호출되는데 이때, setInterval 함수를 통해서 isShowingText 값을 스위칭시켜주고 있습니다. setState() 함수를 통해서 말이죠.

setState() 함수가 호출될 때 BlinkApp 컴포넌트는 다시 렌더가 됩니다.

 

다시 렌더가 될 때마다 isShowingText 값이 true인지 false인지 따라서 <Text> 또는 null이 렌더가 됩니다. 그럼 화면이 깜박깜박 되겠죠:)

실제 개발에서는 state변경을 사용자 입력 또는 서버로부터의 응답을 받아서 setState() 됩니다. 이점 참고를 해주세요.

실제 모습은 깜박입니다 :)

 

 

이번 시간에는 React Native의 기본 모습과 props와 state를 학습했습니다.

정말 중요한 개념들이니 꼭 숙지를 해주셔야 됩니다.

감사합니다.

 

 

* 리액트 네이티브 튜토리얼

http://reactnative.dev/docs/tutorial

 

* 리액트 라이프 사이클

https://reactjs.org/docs/react-component.html