리액트 네이티브[React Native]는 크로스 플랫폼 앱을 제작하기 위한 프레임워크입니다.

리액트 네이티브로 앱을 만드는 것은 매우 효율적이고 중독성도 높습니다. 그러나 시작하기에 약간 까다로운 점이 있습니다. 이 가이드는 공식 Facebook 문서와 함께 참고해야 합니다. Facebook 가이드는 기본적으로 React에 대한 지식이 있다고 가정합니다. Babel이 어떻게 작동하는지 이 가이드의 예제를 활용하여 신속하게 확인하십시오. 이 가이드는 리액트 네이티브 문서의 범위를 벗어나는 Redux와 같은 관련 주제에 대해서도 다룹니다.

나는 당신이 리액트 네이티브를 재밌게 배우기를 바랍니다. 저(@devinaabbott)에게 연락하세요. 그리고 일부 페이지는 다른 저자(각 페이지의 맨 위에 표시)가 작성하므로 자유롭게 문의하십시오.

Hello World

새로운 리액트 네이티브 앱을 만들면 다음과 같이 표시됩니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


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

export default class Project 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('Project', () => Project);

코드가 자바스크립트처럼 보이지 않을 수 있습니다. 이는 새로운 언어 기능(ES6 imports, 클래스, 블록 범위 변수 선언)과 JSX 언어 확장을 사용하기 때문입니다.

다음 섹션에서는 각 주제에 대해 간단히 설명합니다. 이미 잘 알고 있다면 React 컴포넌트 및 컴포넌트 라이프사이클로 건너 뛰세요. React에 대해 이미 잘 알고 있다면 핵심 컴포넌트로 건너 뛰는게 좋습니다.