React Native tutorial 정독

기초 다지기

hello world

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

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}

export default HelloWorldApp;

코드 분석

1. JSX를 사용가능하게 하기 위해 React를 import해주어야 한다. (각 플랫폼의 native components로 변환해주기 위한 JSX)
2. 2번째 줄에서 react-native에서 Text와 View component를 import 해줍니다.

그러면 우리는 HelloWorldApp 함수를 발견할 수 있는데, 이 함수는 functional component이고, 웹에서 사용하는 React와 같은 방식으로 동작한다. 이 함수는 스타일 요소와 Text를 자식으로 가지고 있는 View를 return 한다.

Text 는 View가 container를 렌더링하는 동안 텍스트를 렌더링할 수 있도록 한다. 이 container는 여러가지 styles이 적용되어 있는데, 각각이 무엇을 하는지 분석하도록 하자.

첫번째 스타일인 flext: 1에서, flex는 주요 축을 따라 사용 가능한 공간에 항목을 "채우는" 방법을 정의합니다. 우리는 하나의 container만 가지기 때문에 부모 컨테이너의 가용 공간을 모두 차지하게 됩니다. 이런 경우, 이 componenet만 있기 때문에, 사용가능한 화면 공간을 모두 사용할 것이다.

다음 스타일인 justifyContent: "center"는 컨테이너의 중심축의 중앙에 하위 컨테이너를 정렬합니다. 마지막으로, alignItems: "center"는 컨테이너의 가로축의 중앙에 하위 컨테이너를 정렬합니다.

여기 있는 것들 중 몇몇개는 JavaScript 처럼 보이지 않을 수 있다.
이건 ES2015의 문법을 지원하기 때문에 ES2015가 익숙하지 않다면 해당 튜터리얼 페이지를 가서 참고하길 바란다. (필자는 익숙치 않기때문에 이것과 마찬가지로 정독하는 글을 한번 쓸 예정이다.)

또 다른 특이한 점은 JavaScript에 XML을 내장하기 위한 구문인 <View><Text>Hello world!</Text></View> JSX입니다. 웹에서 사용하는 <div>나 <span>이 View로 표현된것이다.

Components

이 코드는 새로운 Component인 HelloWorldApp을 정의하고 있다. React Native 앱을 설계할때, 새로운 컴퍼넌트를 많이 생성하게 될 것이다. 화면에서 보이는 것이 component의 일종이다.

Props

대부분의 component는 서로 다른 파라미터를 사용해 생성될때 커스텀할 수 있습니다. 이러한 생성 파라미터를 props라고 부릅니다.

자신의 component도 props를 사용할 수 있습니다. 이렇게 하면 앱의 여러 위치에서 사용되는 단일 component를 만들 수 있습니다. 함수 컴퍼넌트에서 props.YOUR_PROP_NAME 을 참조하거나 클래스 컴퍼넌트에서 this.props.YOUR_PROP_NAME을 참조할 수 있습니다.

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

const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})

const Greeting = (props) => {
  return (
    <View style={styles.center}>
      <Text>Hello {props.name}!</Text>
    </View>
  );
}

const LotsOfGreetings = () => {
  return (
    <View style={[styles.center, {top: 50}]}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}

export default LotsOfGreetings;

Greeting컴퍼넌트의 prop을 커스텀하여 name을 사용한다, 그래서 우리는 각 greeting에서 컴퍼넌트를 재사용할 수 있다.

또 다른 새로운 기능은 View 컴퍼넌트입니다. View는 스타일과 레이아웃을 컨트롤하기 위해 다른 컴퍼넌트에 대한 컨테니어로 유용합니다.

props, Text, Image, View 컴퍼넌트를 이용해, 다양한 정적 화면을 구성할 수 있다. 시간이 지남에 따라 앱을 변경하는 법을 배우려면 State에 대해 알아야 합니다.

State

수정이 불가능하고 read-only인 props와는 달리, state는 React 컴퍼넌트를 사용자 작업, 네트워크 응답 등에 대한 응답으로 시간에 따라 변경할 수 있습니다.

React에서 state와 props의 차이점은?

React 컴퍼넌트에서, props는 상위 컴퍼넌트에서 하위 컴퍼넌트로 전달되는 변수입니다. 비슷하게, state도 변수다, 하지만 파라미터로 전달되는 것이 아니라 컴퍼넌트가 내부적으로 초기화하고 관리한다는 차이점이 있다.

// React Native Counter Example using Hooks!

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

(여기서 hook은 또 무엇이냐.. 그건 또 다시 알아봐야 할 것 같다..)

다음 예에서는 위의 카운터 예제를 클래스를 사용한 방법으로 보여주겠다.

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

class App extends Component {
  state = {
    count: 0
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

 render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
        >
         <Text>Click me</Text>
        </TouchableOpacity>
        <View>
          <Text>
            You clicked { this.state.count } times
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: 10
  }
})

export default App;

끝!

출처 : https://reactnative.dev/docs/tutorial