Skip to content

Commit

Permalink
Translate Introducing JSX (#18)
Browse files Browse the repository at this point in the history 
* First draft: introducing-jsx

* fix grammer

* Apply feedback

* Apply feedback

* Update title
  • Loading branch information
@rkdmen @hg-pyun
rkdmen authored and hg-pyun committed Apr 19, 2019
1 parent d152955 commit 4c798f1
Showing 1 changed file with 42 additions and 42 deletions.
84 changes: 42 additions & 42 deletions content/docs/introducing-jsx.md
View file
@@ -1,36 +1,36 @@
---
id: introducing-jsx
title: Introducing JSX
title: JSX 소개
permalink: docs/introducing-jsx.html
prev: hello-world.html
next: rendering-elements.html
---

Consider this variable declaration:
아래 변수 선언을 살펴봅시다.

```js
const element = <h1>Hello, world!</h1>;
```

This funny tag syntax is neither a string nor HTML.
위에 희한한 태그 문법은 문자열도, HTML도 아닙니다.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
JSX는 React "엘리먼트(element)" 를 생성합니다. [다음 섹션](/docs/rendering-elements.html)에서는 DOM에 어떻게 렌더링하는지 알아보겠습니다. 아래를 보면 JSX를 시작하기 위해 필요한 기본사항을 찾으실 수 있습니다.

### Why JSX? {#why-jsx}
### JSX란? {#why-jsx}

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise.
React는 별도의 파일에 마크업과 로직을 넣어 *기술*을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 [*관심사*를 분리](https://en.wikipedia.org/wiki/Separation_of_concerns)합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 [이 이야기](https://www.youtube.com/watch?v=x7cQ3mrcKaY)가 확신을 줄 것입니다.

React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
React는 JSX [사용이 필수가 아니지만](/docs/react-without-jsx.html), 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

With that out of the way, let's get started!
일단 한번 시작해보겠습니다!

### Embedding Expressions in JSX {#embedding-expressions-in-jsx}
### JSX에 표현식 포함하기 {#embedding-expressions-in-jsx}

In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
아래 예시에서는 `name`이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였습니다.

```js{1,2}
const name = 'Josh Perez';
Expand All @@ -42,9 +42,9 @@ ReactDOM.render(
);
```

You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
JSX의 중괄호 안에는 유효한 모든 [JavaScript 표현식](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#표현(식))을 넣을 수 있습니다. 예를 들어 `2 + 2`, `user.firstName` 또는 `formatName(user)` 등은 모두 유효한 JavaScript 표현식입니다.

In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
아래 예시에서는 JavaScript 함수 호출의 결과인 `formatName(user)`을 `<h1>` 엘리먼트에 포함했습니다.

```js{12}
function formatName(user) {
Expand All @@ -68,15 +68,15 @@ ReactDOM.render(
);
```

[](codepen://introducing-jsx)
[CodePen에서 실행하기](codepen://introducing-jsx)

We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](https://stackoverflow.com/q/2846283).
가독성을 좋게 하기 위해 JSX를 여러 줄로 나눴습니다. 필수는 아니지만, 이 작업을 수행할 때 [자동 세미콜론 삽입](https://stackoverflow.com/q/2846283)을 피하고자 괄호로 묶는 것을 권장합니다.

### JSX is an Expression Too {#jsx-is-an-expression-too}
### JSX도 표현식입니다 {#jsx-is-an-expression-too}

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다.

This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
즉, JSX를 `if` 구문 및 `for` loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

```js{3,5}
function getGreeting(user) {
Expand All @@ -87,37 +87,37 @@ function getGreeting(user) {
}
```

### Specifying Attributes with JSX {#specifying-attributes-with-jsx}
### JSX 속성 정의 {#specifying-attributes-with-jsx}

You may use quotes to specify string literals as attributes:
속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.

```js
const element = <div tabIndex="0"></div>;
```

You may also use curly braces to embed a JavaScript expression in an attribute:
중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다.

```js
const element = <img src={user.avatarUrl}></img>;
```

Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 마세요. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안 됩니다.

>**Warning:**
>**경고**
>
>Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
>JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 `camelCase` 프로퍼티 명명 규칙을 사용합니다.
>
>For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
>예를 들어, JSX에서 `class`는 [`className`](https://developer.mozilla.org/ko/docs/Web/API/Element/className)가 되고 tabindex는 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)가 됩니다.
### Specifying Children with JSX {#specifying-children-with-jsx}
### JSX로 자식 정의 {#specifying-children-with-jsx}

If a tag is empty, you may close it immediately with `/>`, like XML:
태그가 비어있다면 XML처럼 `/>` 를 이용해 바로 닫아주어야 합니다.

```js
const element = <img src={user.avatarUrl} />;
```

JSX tags may contain children:
JSX 태그는 자식을 포함할 수 있습니다.

```js
const element = (
Expand All @@ -128,23 +128,23 @@ const element = (
);
```

### JSX Prevents Injection Attacks {#jsx-prevents-injection-attacks}
### JSX는 주입 공격을 방지합니다 {#jsx-prevents-injection-attacks}

It is safe to embed user input in JSX:
JSX에 사용자 입력을 삽입하는 것은 안전합니다.

```js
const title = response.potentiallyMaliciousInput;
// This is safe:
// 이것은 안전합니다.
const element = <h1>{title}</h1>;
```

By default, React DOM [escapes](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 [이스케이프](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 [XSS (cross-site-scripting)](https://ko.wikipedia.org/wiki/사이트_간_스크립팅) 공격을 방지할 수 있습니다.

### JSX Represents Objects {#jsx-represents-objects}
### JSX는 객체를 표현합니다. {#jsx-represents-objects}

Babel compiles JSX down to `React.createElement()` calls.
Babel은 JSX를 `React.createElement()` 호출로 컴파일합니다.

These two examples are identical:
다음 두 예시는 동일합니다.

```js
const element = (
Expand All @@ -162,10 +162,10 @@ const element = React.createElement(
);
```

`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
`React.createElement()`는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성합니다.

```js
// Note: this structure is simplified
// 주의: 다음 구조는 단순화되었습니다
const element = {
type: 'h1',
props: {
Expand All @@ -175,10 +175,10 @@ const element = {
};
```

These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
이러한 객체를 "React 엘리먼트"라고 하며, 이를 화면에 표시하려는 항목에 대한 설명이라고 생각할 수 있습니다. React는 이러한 객체를 읽은 후 DOM을 구성하고 최신으로 유지하는 데 이러한 객체를 사용합니다.

We will explore rendering React elements to the DOM in the next section.
다음 섹션에서는 DOM에 React 엘리먼트를 렌더링하는 방법에 대해 살펴보겠습니다.

>**Tip:**
>**팁**
>
>We recommend using the ["Babel" language definition](https://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
> ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 ["Babel" 언어 설정](https://babeljs.io/docs/editors)을 사용하는 것을 권장합니다. 현재 웹 사이트에서는 호환이 가능한 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 컬러 스키마를 사용하고 있습니다.

0 comments on commit 4c798f1

Please sign in to comment.