React Native 개념잡기 Learn the Basics #2

Learn the Basics #1에 이어서...

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;

What's going on here?

1. First of all, we need to import React to be able to use JSX, which will then be transformed to the native components of each platform.
2. On line 2, we import the Text and View components from react-native

1. 첫째로, JSX를 사용할 수 있도록 React를 가져와야 합니다. 그렇게 되면 각 platform이 native components로 변환됩니다.
2. 두번째로, react-native에서 Text 및 View components를 가져옵니다. 

Then we find the HelloWorldApp function, which is a functional component and behaves in the same way as in React for the web. This function returns a View component with some styles and a Text as its child.

그런 다음, functional component(기능 요소)인 HelloWorldApp을 찾습니다. 이 기능은 web에 대한 React와 동일한 방식으로 작동합니다. 이 함수는 일부 style과 Text가 포함된 View를 하위 항목으로 반환합니다.

 

The Text component allows us to render a text, while the View component renders a container. This container has several styles applied, let's analyze what each one is doing.

View component가 container을 render하는동안, Text component를 render할 수 있습니다. 이 container은 여러가지 스타일이 허용되는데, 각각이 무엇을 하는지 분석해 봅시다.

 

The first style that we find is flex: 1, the flex prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.

첫번째로 보이는 스타일은 flex : 1 입니다. flex prop는 기준축을 따라 가용공간에 걸쳐 항목이 item을 채우는 방법을 정의합니다. 현재 container이 한개이기 때문에, parent componet의 가용공간을 모두 채울 것입니다. 위의 경우, componet가 하나밖에 없기 때문에 사용가능한 가용공간을 모두 차지합니다.

The following style is justifyContent: "center". This aligns children of a container in the center of the container's main axis.

다음으로 보이는 스타일은 justifyContent: "center"입니다. container의 하위 항목이 container's main axis(주축)의 중앙에 정렬됩니다. 

Finally, we have alignItems: "center", which aligns children of a container in the center of the container's cross axis.

마지막으로 alignItems: "center"를 사용하여 container의 하위 항목을 container cross axis(교차축)의 중앙에 정렬합니다.

 

Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.

여기있는 것들 중 일부는 JavaScript로 보이지 않을 수 있습니다. 괜찮아요, 이것이 미래입니다.

 

First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. 

우선, ES2015(ES6로도 알려짐)는 JavaScript의 개선사항으로, 현재 공식 표준의 일부이지만 아직 모든 브라우저가 지원하지 않기 때문에 웹 개발에서 아직 사용되지 않는 경우가 많습니다. React Native ships는 ES2015 지원을 통해 제공되므로 호환성 걱정 없이 이 제품을 사용할 수 있습니다. 

import, export, const and from in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, this page has a good overview of ES2015 features.

위의 예에서 가져오기, 내보내기, const 및 from은 모두 ES2015 기능입니다. ES2015가 익숙하지 않다면 이 튜토리얼처럼 샘플 코드를 읽어서 픽업할 수 있습니다. 원하는 경우 이 페이지에는 ES2015 기능에 대한 개요가 나와 있습니다.

 

The other unusual thing in this code example is <View><Text>Hello world!</Text></View>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a Core Component that displays some text and View is like the <div> or <span>.

이 예제코드의 다른 특이한 점은 <View><Text>Hello world!<Text><View>입니다. 이것은 JavaScript에 XML을 내장하기 위한 구문인 JSX입니다. 많은 프레임워크가 마크업 언어 안에 코드를 삽입할 수 있는 전문 템플리트 언어를 사용합니다. React에선 이 반대로 합니다. JSX를 사용하면 코드 내부에 마크업 언어를 작성할 수 있습니다. 웹 상에서 HTML처럼 보이지만, <div>나 <span> 같은 웹 대신 React componets를 사용합니다.