Merge pull request #3642 from marocchino/ko-update

Update Korean translation to 0185c68

docs/01-why-react.ko-KR.md

@@ -9,11 +9,11 @@ React는 페이스북과 인스타그램에서 사용자 인터페이스를 구
 
 우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: **지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.** 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다.
 
-### 단순함
+## 단순함
 
 당신의 애플리케이션이 특정 시점에 어떻게 보여야 할지를 단순히 표현하는 것만으로, 데이터가 변할 때 React는 자동으로 모든 UI 업데이트를 관리해줍니다.
 
-### 선언적 문법
+## 선언적 문법
 
 데이터가 변할 때 React는 "새로 고침" 버튼을 누르듯이 작동하며, 데이터의 바뀐 부분만을 업데이트할 수 있습니다.
 

docs/03-interactivity-and-dynamic-uis.ko-KR.md

@@ -42,6 +42,7 @@ React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히
 
 
 ## 기본 구현: 오토바인딩과 이벤트 델리게이션
+<a name="under-the-hood-autobinding-and-event-delegation"></a>
 
 코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.
 

docs/05-reusable-components.ko-KR.md

@@ -98,7 +98,7 @@ var ComponentWithDefaultProps = React.createClass({
 
 ## Prop 전달하기: 단축
 
-React 컴포넌트의 흔히 그냥 기본 HTML을 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다.
+React 컴포넌트의 흔히 그냥 기본 HTML 엘리먼트를 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다.
 
 ```javascript
 var CheckLink = React.createClass({

docs/11-advanced-performance.ko-KR.md

@@ -11,7 +11,7 @@ React를 도입하려 할 때 많은 사람이 묻는 첫 번째 질문은 React
 
 React는 브라우저에서 렌더된 DOM 하위 트리의 서술자 개념인 *가상의 DOM*을 사용합니다. 이 병렬적인 서술체는 React가 DOM 노드를 생성하거나 이미 존재하는 DOM 노드에 접근하는 것(JavaScript 객체를 조작하는 것보다 느리죠)을 피하게 해 줍니다. 컴포넌트의 props나 state가 변경되면 React는 새로운 가상의 DOM을 구성해 이전의 것과 비교해서 실제 DOM 업데이트가 필요한지 결정합니다. 가능한 적게 변화를 적용하기 위해, React는 둘이 다를 경우에만 DOM을 [조정](/react/docs/reconciliation-ko-KR.html)할 것입니다.
 
-이에 더해, React는 컴포넌트 생명주기 함수인 `shouldComponentUpdate`를 제공합니다. 이는 다시 렌더링하는 프로세스가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 `true`를 반환해 React가 업데이트를 수행하도록 합니다.
+이에 더해, React는 컴포넌트 생명주기 함수인 `shouldComponentUpdate`를 제공합니다. 이는 다시 렌더링하는 프로세스(가상 DOM 비교와 어쩌면 일어날 DOM 조정)가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 `true`를 반환해 React가 업데이트를 수행하도록 합니다.
 
 ```javascript
 shouldComponentUpdate: function(nextProps, nextState) {

docs/ref-03-component-specs.ko-KR.md

@@ -14,12 +14,12 @@ next: tags-and-attributes-ko-KR.html
 ### render
 
 ```javascript
-ReactComponent render()
+ReactElement render()
 ```
 
 `render()` 메소드는 필수 항목입니다.
 
-호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 컴포넌트를 리턴합니다. 이 자식 컴포넌트는 네이티브 DOM 컴포넌트의 가상 표현 (`<div />`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.
+호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 엘리먼트를 리턴합니다. 이 자식 엘리먼트는 네이티브 DOM 컴포넌트의 가상 표현 (`<div />`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.
 
 아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `<noscript>` 태그를 렌더링합니다. `null`이나 `false`를 리턴한 경우, `React.findDOMNode(this)`는 `null`을 리턴합니다.
 

tips/05-maximum-number-of-jsx-root-nodes.ko-KR.md

@@ -9,4 +9,4 @@ next: style-props-value-px-ko-KR.html
 
 현재 컴포넌트의 `render`는 한 노드만 리턴할 수 있습니다. 만약 `div` 배열을 리턴하려면, `div`, `span`과 같은 다른 컴포넌트로 한 번 더 싸주어야 합니다. 
 
-JSX는 일반 JS로 컴파일 함을 잊지말아야 합니다. 두개의 함수를 리턴하는 것은 문법적으로 맞지 않습니다. 이와 마찬가지로, 한 삼항 연산자 안에 한개 이상의 자식 컴포넌트를 넣으면 안됩니다.
+JSX는 일반 JS로 컴파일 함을 잊지말아야 합니다. 두개의 함수를 리턴하는 것은 문법적으로 맞지 않습니다. 이와 마찬가지로, 한 삼항 연산자 안에 한개 이상의 자식 컴포넌트를 넣으면 안됩니다.

tips/11-dom-event-listeners.ko-KR.md

@@ -0,0 +1,45 @@
+---
+id: dom-event-listeners-ko-KR
+title: 컴포넌트에서 DOM 이벤트 리스너
+layout: tips
+permalink: dom-event-listeners-ko-KR.html
+prev: props-in-getInitialState-as-anti-pattern-ko-KR.html
+next: initial-ajax-ko-KR.html
+---
+
+> 주의:
+>
+> 이 글은 React에서 제공되지 않은 DOM 이벤트를 어떻게 붙이는지 설명합니다. ([더 자세한 정보는 여기에서 보세요.](/react/docs/events-ko-KR.html)). 이는 jQuery 같은 다른 라이브러리들을 통합할 때 좋습니다.
+
+윈도우 크기를 조절해봅시다.
+
+```js
+var Box = React.createClass({
+  getInitialState: function() {
+    return {windowWidth: window.innerWidth};
+  },
+
+  handleResize: function(e) {
+    this.setState({windowWidth: window.innerWidth});
+  },
+
+  componentDidMount: function() {
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  componentWillUnmount: function() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  render: function() {
+    return <div>Current window width: {this.state.windowWidth}</div>;
+  }
+});
+
+React.render(<Box />, mountNode);
+```
+
+컴포넌트가 마운트 되고 DOM 표현을 가지게 되면 `componentDidMount`가 호출됩니다. 일반적인 DOM 이벤트를 붙이는 곳으로 여기를 종종 사용합니다.
+
+이벤트 콜백은 원래 엘리먼트 대신 React 컴포넌트에 바인드하는 걸 주의합시다. React는 [오토바인드](/react/docs/interactivity-and-dynamic-uis-ko-KR.html#under-the-hood-autobinding-and-event-delegation) 과정에서 메서드를 현재 컴포넌트 인스턴스로 바인드합니다.
+

tips/12-initial-ajax.ko-KR.md

@@ -0,0 +1,51 @@
+---
+id: initial-ajax-ko-KR
+title: AJAX를 통해 초기 데이터 읽어오기
+layout: tips
+permalink: initial-ajax-ko-KR.html
+prev: dom-event-listeners-ko-KR.html
+next: false-in-jsx-ko-KR.html
+---
+
+`componentDidMount`에서 데이터를 가져옵니다. 응답이 올 때 데이터가 state에 저장되고 렌더링을 시작하여 UI를 갱신합니다.
+
+비동기 요청의 응답을 처리하여 state를 변경하기 전에, 컴포넌트가 여전히 마운트되었는지를 확인하기 위해 `this.isMounted()`를 사용합니다.
+
+이 예제는 희망하는 Github 사용자의 최근 gist를 가져옵니다.
+
+```js
+var UserGist = React.createClass({
+  getInitialState: function() {
+    return {
+      username: '',
+      lastGistUrl: ''
+    };
+  },
+
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+      var lastGist = result[0];
+      if (this.isMounted()) {
+        this.setState({
+          username: lastGist.owner.login,
+          lastGistUrl: lastGist.html_url
+        });
+      }
+    }.bind(this));
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.state.username}'s last gist is
+        <a href={this.state.lastGistUrl}>here</a>.
+      </div>
+    );
+  }
+});
+
+React.render(
+  <UserGist source="https://api.github.com/users/octocat/gists" />,
+  mountNode
+);
+```

tips/13-false-in-jsx.ko-KR.md

@@ -0,0 +1,30 @@
+---
+id: false-in-jsx-ko-KR
+title: JSX에서 False
+layout: tips
+permalink: false-in-jsx-ko-KR.html
+prev: initial-ajax-ko-KR.html
+next: communicate-between-components-ko-KR.html
+---
+
+`false` 렌더링이 여러 문맥에서 어떻게 다뤄지는지 봅시다.
+
+`id="false"`로 렌더링
+
+```js
+React.render(<div id={false} />, mountNode);
+```
+
+문자열 `"false"`를 입력값으로
+
+```js
+React.render(<input value={false} />, mountNode);
+```
+
+자식 없음
+
+```js
+React.render(<div>{false}</div>, mountNode);
+```
+
+`div` 자식으로 쓰인 문자열 `"false"`를 렌더링하지 않은 것은 더 일반적인 사용 사례를 허용하기 위함입니다. `<div>{x > 1 && '하나 이상의 아이템을 가졌습니다.'}</div>`

tips/14-communicate-between-components.ko-KR.md

@@ -32,10 +32,10 @@ var GroceryList = React.createClass({
 });
 
 React.render(
-  <GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode );
+  <GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode
+);
 ```
 
 `bind(this, arg1, arg2, ...)`의 사용을 확인하세요: 간단히 `handleClick`에 인자를 더 넘겼습니다. 이는 React의 새로운 컨셉이 아닙니다; 그냥 JavaScript죠.
 
-부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다.
-`componentDidMount()`에서 이벤트를 구독하고, `componentWillUnmount()`에서 해제합니다. 이벤트를 받으면 `setState()`를 호출합니다.
+부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다. `componentDidMount()`에서 이벤트를 구독하고, `componentWillUnmount()`에서 해제합니다. 이벤트를 받으면 `setState()`를 호출합니다. [Flux](https://facebook.github.io/flux/) 패턴은 이를 정리하는 방법 중 하나입니다.