1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. 튜토리얼

튜토리얼

React Native는 React와 비슷하지만 웹 컴포넌트 대신 네이티브 컴포넌트를 사용합니다. React Native 앱의 기본 구조를 이해하려면 JSX, 컴포넌트, state 및 props와 같은 기본 React 개념을 이해해야 합니다. React를 이미 알고 있다면, 네이티브 컴포넌트와 같은 React-Native 특화된 것들을 알아야 합니다. 이 튜토리얼은 당신이 React 경험이 있든 없든 상관없이 모든 사용자를 대상으로 합니다.

이제 해봅시다.

Hello World

우리 민족의 고대 전통에 따라, “Hello world” 말고는 아무것도 하지 않는 앱을 먼저 만들어야 합니다. 여기 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

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

호기심이 생기면 웹 시뮬레이터에서 직접 샘플 코드를 가지고 놀 수 있습니다. index.ios.js 또는 index.android.js 파일에 붙여넣기하여 로컬 시스템에 실제 앱을 만들 수도 있습니다.

무슨 일이 일어난거죠?

여기에 있는 것들 중 일부는 자바스크립트처럼 보이지 않을 수도 있습니다. 당황하지 마십시오. 이것은 미래입니다.

무엇보다도 ES2015(ES6이라고도 함)는 공식 표준의 일부가 되었지만 아직 모든 브라우저에서 지원되지 않는 자바스크립트 개선 세트이므로 웹 개발에는 아직 사용되지 않습니다. React native는 ES2015를 지원하므로 호환성 걱정없이 이 항목을 사용할 수 있습니다. import, from, class, extends 및 위의 예에서 () => 구문은 모두 ES2015 기능입니다. ES2015에 익숙하지 않은 경우 이 튜토리얼과 같은 샘플 코드를 읽는 것만으로도 사용할 수 있습니다. 원하는 경우 이 페이지를 통해 ES2015 기능에 대한 개요를 볼 수 있습니다.

이 코드 예제의 다른 특이한 점은 “Hello world!“입니다. 자바스크립트 내에서 XML을 임베드하는 구문 인 JSX입니다. 많은 프레임워크는 마크업 언어에 코드를 임베드할 수 있는 특별한 템플릿 언어를 사용합니다. React에서는 이것이 역전됩니다. JSX를 사용하면 코드 내에 마크업 언어를 작성할 수 있습니다.

또는 과 같은 웹 요소 대신 React 컴포넌트를 사용하는 경우를 제외하고는 웹에서 HTML처럼 보입니다. 이 경우 는 일부 텍스트 만 표시하는 기본 제공 컴포넌트입니다.

컴포넌트 및 AppRegistry

따라서 이 코드는 새로운 컴포넌트인 HelloWorldApp을 정의하고 AppRegistry에 등록합니다. React Native 앱을 만들면 새로운 컴포넌트를 많이 만들 수 있습니다. 화면에 표시되는 내용은 일종의 컴포넌트입니다. 컴포넌트는 매우 간단 할 수 있습니다. 필요한 유일한 것은 렌더링 할 JSX를 반환하는 렌더링 함수입니다.

AppRegistry는 React Native에게 전체 애플리케이션의 루트 컴포넌트를 알려줍니다. 당신은 AppRegistry에 대해 많이 생각하지 않을 것입니다 – 당신의 전체 어플리케이션에서 AppRegistry.registerComponent에 대한 호출이 있을 것입니다. 이 예제에 포함되어 있으므로 모든 것을 index.ios.js 또는 index.android.js 파일에 붙여넣고 실행할 수 있습니다.

이 앱은 아주 많은 일을 하진 않습니다.

좋은 지적입니다. 컴포넌트가 더 재미있는 일을 하도록 하려면, 당신은 Props에 대해 배워야 합니다.

Was this article helpful to you? Yes No

How can we help?