[React Native] The Basics : Introduction

Introduction
0.64 Version 을 기준으로 번역했습니다.

많은 다양한 종류의 사람들이 React Native를 사용합니다. : 숙련된 iOS 개발자부터 리액트 초보자, 커리어에서 처음으로 프로그래밍을 시작한 사람들까지. 이 공식문서는 경험 수준이나 배경에 상관없이 모든 학습자들을 위해 작성되었습니다.

공식 문서 활용하는 법

당신은 여기서부터 시작해 이 공식문서를 책처럼 쭉 읽어나가거나, 당신이 필요한 특정 부분만 읽을 수 있습니다. 이미 React에 익숙하신가요? 그렇다면 해당 섹션을 스킵할 수 있습니다. - 가벼운 복습을 위해 읽어보세요.

필수 구성 요소 (Prerequisites)

React Native 로 작업하기 위해서는 JavaScript 핵심요소에 대한 이해가 필요합니다. 만약 당신이 JavaScript에 새롭거나 추가학습이 필요하다면 Mozilla Developer Network 를 복습하거나 공부하면 됩니다.

우리는 React, Android, iOS 개발에 대한 사전 지식이 없는 것을 가정하기 위해 최선을 다하고 있지만, 이것들은 React Native 개발 지망생들에게 중요한 주제입니다. 합리적으로 우리는 심층적인 자료와 기사와 연결지었습니다.

Interactive examples

이 도입부에서는 브라우저를 이용해 다음과 같은 대화형 예제로 즉시 시작해볼 수 있게 합니다.

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

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Try editing me! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

위는 Snack Player 입니다. Snack Player는 Expo에서 React Native 프로젝트를 내장하여 실행하고 프로젝트가 Android 와 iOS 같은 플랫폼에서 어떻게 렌더링되는지를 공유하기 위해 만든 손쉬운 툴입니다. 코드는 활성화 상태이고 편집 가능하므로 당신의 브라우저에서 직접 실행시킬 수 있습니다. 바로 위의 "Try deiting me!" 텍스트를 "Hello, world!"로 바꿔보세요.

추가적으로, local 개발 환경을 갖추길 원한다면 우리의 가이드를 따라서 당신의 로컬 머신 환경을 세팅하고 당신의 App.js 파일에 코드 예제를 붙여넣기 하세요. (만약 당신이 웹 개발자라면, 이미 모바일 브라우저를 위한 로컬 환경 설정이 되어있을 것입니다!)

Function Components 와 Class Components

React로 당신은 클래스나 함수를 사용하여 컴포넌츠를 만들 수 있습니다.
원래 class components 는 state를 가진 유일한 컴포넌츠였습니다. 그러나 React's Hooks API 가 도입된 이후로 function components 에 state 등을 추가할 수 있게 되었습니다.
Hooks 는 React Native 0.59 에 도입되었습니다. Hooks 는 React 컴포넌츠를 작성하는 미래지향적인 방법이기 때문에 우리는 function component 예제를 이용해 이 서론을 작성했습니다. 우리는 또한 다음과 같은 토글 아래에 class components를 다룹니다.

Function Component

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;

Class Component

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

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

export default HelloWorldApp;

당신은 이 문서의 이전 버전에서 더 많은 class components 예제를 찾을 수 있습니다.

Developer Notes

많은 다른 개발 환경을 가진 사람들이 React Native 를 배우고 있습니다. 당신은 웹에서 Android 나 iOS 등의 다양한 기술을 사용해 본 경험이 있을 것입니다. 우리는 모든 환경의 개발자들을 위해 글을 쓰려고 노력합니다. 때로 우리는 하나의 혹은 다른 특정한 플랫폼에만 다음과 같은 설명을 제공합니다.
''Android/iOS/Web 개발자들은 이 개념에 익숙할 것입니다.''

Formatting

메뉴의 경로는 bold 체로 작성되며, 하위 메뉴를 탐색할 때의 주의사항을 사용합니다.
예 : Android Studio > Preferences

이제 당신은 이 가이드가 어떻게 돌아가는지 알았으니, React Native의 기초인 Native Components 에 대해 알아볼 시간입니다.