[번역] Tutorial: Overview 1

Overview

개요

 

Now that you’re set up, let’s get an overview of React!

설치했으니까 이제 리액트를 훑어보자!

What Is React?

리액트란?

 

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

리액트는 명료하고 효율적이고 유연한 자바스크립트 라이브러리다. 이는 유저 인터페이스를 만들기 위함이다. 리액트는 복잡한 UI를 작고 고립된 '컴포넌트'라 불리는 코드로 구성한다.

 

React has a few different kinds of components, but we’ll start with React.Component subclasses:

리액트는 몇 가지 종류의 컴포넌트를 가지고 있지만 우리는 React.Component 하위 클래스부터 시작하자.

 

We’ll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.

우리는 곧 재밌는 xml같은 태그들을 만난다. 우리는 컴포넌트들을 사용하여 스크린에 보여주길 원하는 것을 리액트에게 전달한다. 데이터가 바뀔 때, 리액트는 효율적으로 업데이트하고 다시 컴포넌트를 렌더링한다.

 

Here, ShoppingList is a React component class, or React component type. A component takes in parameters, called props (short for “properties”), and returns a hierarchy of views to display via the render method.

여기, ShoppingList는 리액트 컴포넌트 클래스거나 리액트 컴포넌트 유형이다. 컴포넌트는 매개변수를 가지고 있다. 이를 props(properties의 준말)라 부른다. 그리고 뷰의 계층구조를 리턴한다. 렌더 메소드를 통해서 보여지도록.

 

The render method returns a description of what you want to see on the screen. React takes the description and displays the result. In particular, render returns a React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The <div /> syntax is transformed at build time to React.createElement('div'). The example above is equivalent to:

렌더 메소드는 스크린에서 보여주길 원하는 것에 대해 기술한 것을 반환한다. 리액트는 기술한 것을 취해 결과를 보여준다. 특히, 렌더 메소드는 리액트 엘리먼트를 반환한다. 이는 렌더할 것을 간단하게 기술한 것이다. 대부분의 리액트 개발자들은 특별한 문법, "jsx"을 사용한다. 이는 이 구조들을 쓰기 쉽게 만들어준다. <div />문법은 빌드할 때 React.createElement('div')로 변환한다. 위의 예는 다음과 같다.

See full expanded version.

Babel · The compiler for next generation JavaScript

 

If you’re curious, createElement() is described in more detail in the API reference, but we won’t be using it in this tutorial. Instead, we will keep using JSX.

만일 너가 호기심이 생긴다면, createElement메소드의 더 자세한 설명을 API 참조에서 볼 수 있다. 그러나 우리는 이번 튜토리얼에서 createElement를 사용하지 않았다. 우리는 jsx를 사용하여 계속 할 것이다.

 

JSX comes with the full power of JavaScript. You can put any JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program.

JSX는 자바스크립트의 모든 기능을 제공한다. 너는 jsx의 중괄호 안에 어떤 자바스크립트 표현식이든 넣을 수 있다. 각각의 리액트 엘리먼트는 자바스크립트 객체이다. 자바스크립트 객체는 변수에 저장하거나 너의 프로그램에서 넘겨줄 수 있다.

 

The ShoppingList component above only renders built-in DOM components like <div />and <li />. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing <ShoppingList />. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components.

ShoppingList 컴포넌트는 오직 내장된 DOM 컴포넌트 (<div />와 <li />같은)로만 렌더할 수 있다. 그러나 너는 사용자 정의 리액트 컴포넌트 또한 렌더하고 구성할 수 있다. 예를 들어, 우리는 이제 <ShoppingList />를 사용해서 전체 쇼핑 리스트를 참조할 수 있다.  각각의 리액트 컴포넌트는 캡슐화되어있고 독립적으로 동작할 수 있다. 이것은 너가 복잡한 UI들을 단순한 컴포넌트로 구성할 수 있다.