002 Learn the Basics 기초 배우기

기초 배우기

React Native는 React와 비슷하지만 웹 구성 요소 대신 Native 구성 요소를 빌딩 블록으로 사용합니다. 따라서 React Native 앱의 기본 구조를 이해하려면 JSX, 구성요소, 상태, 소품 등 몇 가지 기본 React 개념을 이해해야 합니다. React를 이미 알고 있는 경우에도 기본 구성 요소와 같은 React-Native 관련 사항을 학습해야 합니다. 본 자습서는 React 경험이 있는지 여부에 관계없이 모든 사용자를 대상으로 합니다.

시작해보입시다!

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>

    );

  }

}

웹 시뮬레이터에서 샘플 코드를 직접 실행해 볼 수 있습니다. 또한 App.js 파일에 붙여넣어 로컬 시스템에 실제 앱을 만들 수도 있습니다.

여기서 무슨 일이 일어나고 있는 거예요?

여기 있는 것 중 일부는 JavaScript 와 다를 수 있습니다. 진정하라구요. 이것은 나중에 일어날 일입니다.

먼저, ES2015(ES6)는 현재 공식 표준의 일부이지만 아직 모든 브라우저에서 지원되지 않는 JavaScript의 개선 사항으로, 웹 개발에서는 아직 사용되지 않는 경우가 많습니다. React Native 는 호환성 걱정 없이 사용할 수 있습니다. 위의 예에서 import, from, class 및 extends 기능은 모두 ES2015 기능입니다. ES2015를 잘 모르신다면 본 자습서처럼 샘플 코드를 읽어보시면 됩니다. 이 페이지에서는 ES2015 기능에 대해 자세히 설명합니다.

이 코드 예에서 또 다른 특이한 점은 <View><Text>Hello world!</Text><View>입니다. 이것은 JavaScript에 XML을 삽입하기 위한 구문인 JSX입니다. 많은 프레임워크는 마크업 언어에 코드를 삽입할 수 있는 특수한 템플릿 언어를 사용합니다. React에서는 거꾸로입니다. JSX를 사용하면 코드 내에 마크업 언어를 쓸 수 있습니다. 웹상의 HTML과 같이 보이는데, <div>나 <span>과 같은 것을 제외하고, React 구성 요소를 사용합니다. 이 경우 <Text>는 일부 텍스트만 표시하는 내장 구성요소이며, <View>는 <div> 또는 <span>과 같습니다.

Components (구성요소)

이 코드는 새로운 구성 요소인 HelloWorldApp 을 정의합니다. React Native 앱을 만들 때 새로운 구성 요소를 많이 만들 수 있습니다. 화면에 보이는 것은 모두 일종의 구성 요소입니다. 구성 요소는 매우 단순할 수 있습니다. 렌더 함수만 있으면 JSX 를 렌더링할 수 있습니다.

이 앱은 별 기능이 없습니다.

좋은 지적이에요. 구성 요소가 더 흥미로운 작업을 수행하도록 하려면 Props(소품) 에 대해 알아야 합니다.