diff --git a/_config.yml b/_config.yml
index c7f9c58d..cd1d9e58 100644
--- a/_config.yml
+++ b/_config.yml
@@ -29,6 +29,7 @@ markdown: redcarpet
redcarpet:
extensions:
- fenced_code_blocks
+ - footnotes
sass:
style: :compressed
sass_dir: _css
diff --git a/docs/01-why-react.ko-KR.md b/docs/01-why-react.ko-KR.md
new file mode 100644
index 00000000..40757c6b
--- /dev/null
+++ b/docs/01-why-react.ko-KR.md
@@ -0,0 +1,30 @@
+---
+id: why-react-ko-KR
+title: 왜 React인가?
+permalink: why-react-ko-KR.html
+next: displaying-data-ko-KR.html
+---
+
+React는 페이스북과 인스타그램에서 사용자 인터페이스를 구성하기 위해 만들어진 라이브러리입니다. 많은 사람들은 React를 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 에서의 **V** 로 생각하는 경향이 있습니다.
+
+우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: **지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.** 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다.
+
+### 단순함
+
+당신의 애플리케이션이 특정 시점에 어떻게 보여야 할지를 단순히 표현하는 것만으로, 데이터가 변할 때 React는 자동으로 모든 UI 업데이트를 관리해줍니다.
+
+### 선언적 문법
+
+데이터가 변할 때 React는 "새로 고침" 버튼을 누르듯이 작동하며, 데이터의 바뀐 부분만을 업데이트할 수 있습니다.
+
+## 구성적인 컴포넌트를 만드세요
+
+React는 재사용 가능한 컴포넌트들을 만드는 데에 도움이 됩니다. 사실, React를 사용하면 *단지* 컴포넌트를 만드는 일만 하게 됩니다. 컴포넌트들은 잘 캡슐화되어 되어 있기 때문에, 컴포넌트들은 코드의 재사용성을 높이고, 테스트를 쉽게 해 주며, 관심 분리의 원칙(separation of concerns)을 지키게 해 줍니다.
+
+## 5분만 투자하세요
+
+React는 많은 관습적인 사고에 도전하며, 첫눈에 볼 때는 이상한 아이디어들의 모음이라고 생각할 수도 있습니다. 이 가이드를 읽기 위해 [5분만 투자하세요](http://37signals.com/svn/posts/3124-give-it-five-minutes); 그 이상한 아이디어들은 페이스북과 인스타그램 안팎의 수천 개의 컴포넌트들을 만드는 데에 사용되었기 때문입니다.
+
+## 더 알아보기
+
+[이 블로그 포스트](http://facebook.github.io/react/blog/2013/06/05/why-react.html)에서 React를 만든 우리의 동기에 대해 알아볼 수 있습니다.
diff --git a/docs/02-displaying-data.ko-KR.md b/docs/02-displaying-data.ko-KR.md
new file mode 100644
index 00000000..0c02ccbc
--- /dev/null
+++ b/docs/02-displaying-data.ko-KR.md
@@ -0,0 +1,126 @@
+---
+id: displaying-data-ko-KR
+title: 데이터를 표시하기
+permalink: displaying-data-ko-KR.html
+prev: why-react-ko-KR.html
+next: jsx-in-depth-ko-KR.html
+---
+
+UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하는 것입니다. React는 데이터를 표시하고 데이터가 변할 때마다 인터페이스를 최신의 상태로 자동으로 유지하기 쉽게 해 줍니다.
+
+## 시작하기
+
+정말 간단한 예제를 보도록 하죠. 다음과 같은 코드의 `hello-react.html` 파일을 만듭시다.
+
+```html
+
+
+
+ Hello React
+
+
+
+
+
+
+
+
+```
+
+문서의 나머지에서, 코드가 위와 같은 HTML 템플릿에 들어갔다고 가정하고 JavaScript 코드에만 집중할 것입니다. 위의 주석 부분을 다음과 같은 JavaScript 코드로 바꿔 보세요:
+
+```javascript
+var HelloWorld = React.createClass({
+ render: function() {
+ return (
+
+ 안녕, !
+ 지금 시간은 {this.props.date.toTimeString()} 입니다.
+
+ );
+ }
+});
+
+setInterval(function() {
+ React.render(
+ ,
+ document.getElementById('example')
+ );
+}, 500);
+```
+
+
+## 반응 적(Reactive) 업데이트
+
+`hello-react.html` 파일을 웹 브라우저에서 열어 당신의 이름을 텍스트 필드에 써 보세요. React는 단지 시간을 표시하는 부분만을 바꿉니다 — 텍스트 필드 안에 입력한 것은 그대로 남아 있구요, 당신이 이 동작을 관리하는 그 어떤 코드도 쓰지 않았음에도 불구하고 말이죠. React는 그걸 올바른 방법으로 알아서 해줍니다.
+
+우리가 이걸 할 수 있었던 건, React는 필요한 경우에만 DOM을 조작하기 때문입니다. **React는 빠른 React 내부의 DOM 모형을 이용하여 변경된 부분을 측정하고, 가장 효율적인 DOM 조작 방법을 계산해 줍니다.**
+
+이 컴포넌트에 대한 입력은 `props` 라고 불립니다 — "properties" 를 줄인 것이죠. 그들은 JSX 문법에서는 어트리뷰트로서 전달됩니다. 당신은 `props` 를 컴포넌트 안에서 불변의(immutable) 엘리먼트로서 생각해야 하고, `this.props` 를 덮어씌우려고 해서는 안됩니다.
+
+
+## 컴포넌트들은 함수와 같습니다
+
+React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props` 와 `state` (이것들은 나중에 언급할 것입니다) 를 받고 HTML을 렌더링하는 단순한 함수들로 생각해도 됩니다. 그것들은 너무 단순하기 때문에, 그것들의 작동을 이해하는 것 또한 쉽게 만듭니다.
+
+> 주의:
+>
+> **한가지 제약이 있습니다**: React 컴포넌트들은 단 하나의 루트 노드(root node)만을 렌더할 수 있습니다. 만약 여러개의 노드들을 리턴하고 싶다면, 그것들은 단 하나의 루트 노드로 싸여져 있어야만 합니다.
+
+
+## JSX 문법
+
+우리는 컴포넌트를 사용하는 것이 "템플릿"과 "디스플레이 로직(display logic)"을 이용하는 것보다 관심을 분리(separate concerns)하는 데에 올바른 방법이라고 강하게 믿고 있습니다. 우리는 마크업과 그것을 만들어내는 코드는 친밀하게 함께 결합되어있다고 생각합니다. 또한, 디스플레이 로직은 종종 매우 복잡하고, 그것을 템플릿 언어를 이용해 표현하는 것은 점점 사용하기 어렵게 됩니다.
+
+우리는 이 문제를 해결하는 최고의 해결책은, UI를 만드는 진짜 프로그래밍 언어의 표현력을 모두 사용할 수 있는 JavaScript 코드로부터 HTML과 컴포넌트 트리들을 생성하는 것임을 발견했습니다.
+
+이것을 더 쉽게 하기 위해서, 우리는 매우 간단하고, **선택적인** HTML과 비슷한 문법을 추가하여 이 React 트리 노드들을 만들 수 있게 했습니다.
+
+**JSX는 당신으로 하여금 HTML 문법을 이용해 JavaScript 객체를 만들게 해줍니다.** React를 이용해 순수한 JavaScript 문법으로 링크를 만드려고 한다면, 코드는 다음과 같습니다:
+
+`React.createElement('a', {href: 'http://facebook.github.io/react/'}, '안녕하세요!')`
+
+JSX를 이용하면:
+
+`안녕하세요!`
+
+우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.**
+
+JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html). 를 살펴 보시기 바랍니다. 또는, [우리의 온라인 JSX 컴파일러](/react/jsx-compiler.html)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
+
+JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다.
+
+JSX를 사용하기 시작하기 위한 가장 쉬운 방법은 브라우저에서 작동하는 `JSXTransformer`를 사용하는 것입니다. 우리는 이것을 프로덕션에서는 사용하지 않기를 강하게 권장하는 바입니다. 당신은 우리의 커맨드 라인 [react-tools](http://npmjs.org/package/react-tools) 패키지를 이용하여 미리 컴파일(precompile)해 사용할 수 있습니다.
+
+
+## JSX 없이 React 사용하기
+
+JSX는 완전히 선택적입니다. 당신은 React와 JSX를 함께 사용하지 않아도 상관없습니다. 그냥 JavaScript에서 React 엘리먼트를 `React.createElement`로 만들 수 있습니다. 여기에 태그 이름이나 컴포넌트, 속성 객체, 자식 엘리먼트들을 전달하면 됩니다.
+
+```javascript
+var child1 = React.createElement('li', null, 'First Text Content');
+var child2 = React.createElement('li', null, 'Second Text Content');
+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
+React.render(root, document.body);
+```
+
+편의를 위하여, 당신은 팩토리 함수 헬퍼들을 이용해 커스텀 컴포넌트로부터 엘리먼트들을 만들 수 있습니다.
+
+```javascript
+var Factory = React.createFactory(ComponentClass);
+...
+var root = Factory({ custom: 'prop' });
+React.render(root, document.body);
+```
+
+React는 이미 일반적인 HTML 태그에 대한 빌트인 팩토리를 가지고 있습니다.
+
+```javascript
+var root = React.DOM.ul({ className: 'my-list' },
+ React.DOM.li(null, '텍스트')
+ );
+```
diff --git a/docs/02.1-jsx-in-depth.ko-KR.md b/docs/02.1-jsx-in-depth.ko-KR.md
new file mode 100644
index 00000000..cbd982a8
--- /dev/null
+++ b/docs/02.1-jsx-in-depth.ko-KR.md
@@ -0,0 +1,210 @@
+---
+id: jsx-in-depth-ko-KR
+title: JSX 깊이보기
+permalink: jsx-in-depth-ko-KR.html
+prev: displaying-data-ko-KR.html
+next: jsx-spread-ko-KR.html
+---
+
+[JSX](http://facebook.github.io/jsx/)는 XML과 비슷한 JavaScript문법 확장입니다. React에서 변환되는 간단한 JSX 구문을 사용하실 수 있습니다.
+
+## 왜 JSX인가?
+
+React를 위해 꼭 JSX를 사용할 필요는 없고, 그냥 일반 JS를 사용할 수도 있습니만 JSX를 사용하기를 추천합니다. 왜냐하면, 어트리뷰트를 가진 트리 구조로 정의할 수 있는 간결하고 익숙한 문법이기 때문입니다.
+
+이것은 디자이너 같은 케쥬얼 개발자에게 더 익숙합니다.
+
+XML에는 여닫는 태그의 장점이 있습니다. 태그는 큰 트리일 때 함수 호출이나 객체 리터럴보다 읽기 쉬워 집니다.
+
+JSX는 JavaScript의 시맨틱을 변경하지 않습니다.
+
+## HTML 태그 vs. React 컴포넌트
+
+React는 렌더 HTML 태그(문자열)이나 React 컴포넌트(클래스)일 수 있습니다.
+
+HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세요.
+
+```javascript
+var myDivElement = ;
+React.render(myDivElement, document.body);
+```
+
+React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.
+
+```javascript
+var MyComponent = React.createClass({/*...*/});
+var myElement = ;
+React.render(myElement, document.body);
+```
+
+React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.
+
+> 주의:
+>
+> JSX가 JavaScript기 때문에, `class`, `for`같은 식별자는 XML 어트리뷰트 이름으로
+> 권장하지 않습니다. 대신, React DOM 컴포넌트는 각각 `className`, `htmlFor`같은
+> DOM 프로퍼티 이름을 기대합니다.
+
+
+## 변환
+
+React JSX는 XML같은 문법에서 네이티브 JavaScript로 변환됩니다. XML 엘리먼트, 어트리뷰트, 자식은 `React.createElement`에 넘겨지는 인자로 변환됩니다.
+
+```javascript
+var Nav;
+// 입력 (JSX):
+var app = ;
+// 출력 (JS):
+var app = React.createElement(Nav, {color:"blue"});
+```
+
+``를 사용하려면, `Nav`변수는 스코프에 있어야 합니다.
+
+JSX에서는 XML 구문으로 자식을 지정할 수도 있습니다.
+
+```javascript
+var Nav, Profile;
+// 입력 (JSX):
+var app = ;
+// 출력 (JS):
+var app = React.createElement(
+ Nav,
+ {color:"blue"},
+ React.createElement(Profile, null, "click")
+);
+```
+
+클래스에 [displayName](/react/docs/component-specs-ko-KR.html#displayName)이 정의되어 있지 않으면 JSX는 변수명을 displayName으로 간주할 것입니다:
+
+```javascript
+// 입력 (JSX):
+var Nav = React.createClass({ });
+// 출력 (JS):
+var Nav = React.createClass({displayName: "Nav", });
+```
+
+[JSX 컴파일러](/react/jsx-compiler.html)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
+
+JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.
+
+> 주의:
+>
+> JSX 표현식은 언제나 ReactElement로 평가됩니다. 실제 구현의 세부사항은 많이
+> 다를 수 있습니다. 최적화 모드는ReactElement를 `React.createElement`에서 검증
+> 코드를 우회하는 객체 리터럴로 ReactElement를 인라인으로 만들 수 있습니다.
+
+## 네임스페이스를 사용한 컴포넌트
+
+폼같은 자식을 많이 가지는 컴포넌트를 만든다면, 많은 변수 선언을 하게 될 것입니다.
+
+```javascript
+// 변수 선언의 어색한 블록
+var Form = MyFormComponent;
+var FormRow = Form.Row;
+var FormLabel = Form.Label;
+var FormInput = Form.Input;
+
+var App = (
+
+);
+```
+
+더 간단하고 쉽게 *네임스페이스를 사용한 컴포넌트*를 사용해서, 다른 컴포넌트를 어트리뷰트로 가지는 하나의 컴포넌트만 쓸 수 있습니다.
+
+```javascript
+var Form = MyFormComponent;
+
+var App = (
+
+);
+```
+
+이렇게 하려면, *"sub-components"*를 메인 컴포넌트의 어트리뷰트로 만들 필요가 있습니다.
+
+```javascript
+var MyFormComponent = React.createClass({ ... });
+
+MyFormComponent.Row = React.createClass({ ... });
+MyFormComponent.Label = React.createClass({ ... });
+MyFormComponent.Input = React.createClass({ ... });
+```
+
+코드를 컴파일할 때 JSX는 이것을 제대로 처리해 줍니다.
+
+```javascript
+var App = (
+ React.createElement(Form, null,
+ React.createElement(Form.Row, null,
+ React.createElement(Form.Label, null),
+ React.createElement(Form.Input, null)
+ )
+ )
+);
+```
+
+> 주의:
+>
+> 이 기능은 [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) 이상에만 있습니다.
+
+## JavaScript 표현식
+
+### 어트리뷰트 표현식
+
+JavaScript 표현식을 어트리뷰트 값으로 사용하려면, 표현식을 쌍따옴표(`""`)대신 중괄호(`{}`)로 감싸야 합니다.
+
+```javascript
+// 입력 (JSX):
+var person = ;
+// 출력 (JS):
+var person = React.createElement(
+ Person,
+ {name: window.isLoggedIn ? window.name : ''}
+);
+```
+
+### 자식 표현식
+
+비슷하게, JavaScript 표현식을 자식을 표현하는 데 사용할 수 있습니다.
+
+```javascript
+// 입력 (JSX):
+var content = {window.isLoggedIn ? : };
+// 출력 (JS):
+var content = React.createElement(
+ Container,
+ null,
+ window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
+);
+```
+
+### 주석
+
+JSX에 주석을 넣기는 쉽습니다. 그냥 JS 표현식과 같습니다. 그냥 태그의 자식 섹션에서만 조심하시면 됩니다. 이럴 땐 주석 주변에 `{}`를 감싸야 합니다.
+
+```javascript
+var content = (
+
+);
+```
+
+> 주의:
+>
+> JSX 는 HTML과 비슷하지만 완전히 같지는 않습니다. 중요한 차이점을 보시려면 [JSX gotchas](/react/docs/jsx-gotchas-ko-KR.html)를 보세요.
diff --git a/docs/02.2-jsx-spread.ko-KR.md b/docs/02.2-jsx-spread.ko-KR.md
new file mode 100644
index 00000000..57828ad9
--- /dev/null
+++ b/docs/02.2-jsx-spread.ko-KR.md
@@ -0,0 +1,56 @@
+---
+id: jsx-spread-ko-KR
+title: JSX 스프레드 어트리뷰트
+permalink: jsx-spread-ko-KR.html
+prev: jsx-in-depth-ko-KR.html
+next: jsx-gotchas-ko-KR.html
+---
+
+미리 컴포넌트에 넣을 모든 프로퍼티를 알게 된다면, JSX를 사용하기 쉬워집니다.
+
+```javascript
+ var component = ;
+```
+
+## Props의 변경은 나빠요.[^1]
+
+하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다.
+
+```javascript
+ var component = ;
+ component.props.foo = x; // 나쁨
+ component.props.bar = y; // 역시 나쁨
+```
+
+이것은 안티 패턴입니다. 왜냐하면 한참 뒤까지 정확한 propTypes을 체크할 수 없다는 뜻이기 때문입니다. 이것은 propTypes 에러는 알기 힘든 스택 트레이스로 끝난다는 의미입니다.
+
+이 시점에서 props는 불변성인 것을 고려해야 합니다. props 객체를 변경하는 것은 다른 곳에서 예기치 못한 결과가 생길 수 있기 때문에 이상적으로는 이 시점에서 frozen 객체가 되어야 합니다.
+
+## 스프레드 어트리뷰트
+
+이제 JSX의 새로운 기능인 스프레드 어트리뷰트를 사용하실 수 있습니다.
+
+```javascript
+ var props = {};
+ props.foo = x;
+ props.bar = y;
+ var component = ;
+```
+
+전달한 객체의 프로퍼티가 컴포넌트의 props에 복사됩니다.
+
+이렇게 여러 번 사용하거나 다른 어트리뷰트와 조합해서 사용할 수 있습니다. 명세의 순서는 중요합니다. 나중의 어트리뷰트가 이전 것보다 우선되기 때문입니다.
+
+```javascript
+ var props = { foo: 'default' };
+ var component = ;
+ console.log(component.props.foo); // 'override'
+```
+
+## 이상한 `...` 표기법은 무엇인가요?
+
+`...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다.
+
+[^1]: 아무래도 좋지만, 이 제목의 원문 "Mutating Props is Bad, mkay"는 사우스 파크에
+ 나온 대사 "[Drug is bad, mkay](https://www.youtube.com/watch?v=Uh7l8dx-h8M)"의
+ 패러디입니다.
diff --git a/docs/02.3-jsx-gotchas.ko-KR.md b/docs/02.3-jsx-gotchas.ko-KR.md
new file mode 100644
index 00000000..30436103
--- /dev/null
+++ b/docs/02.3-jsx-gotchas.ko-KR.md
@@ -0,0 +1,68 @@
+---
+id: jsx-gotchas-ko-KR
+title: JSX Gotchas
+permalink: jsx-gotchas-ko-KR.html
+prev: jsx-spread-ko-KR.html
+next: interactivity-and-dynamic-uis-ko-KR.html
+---
+
+JSX는 HTML처럼 보이지만, 작업하다 보면 마주치게 될 몇 가지 중요한 차이점이 있습니다.
+
+> 주의:
+>
+> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/react/docs/dom-differences-ko-KR.html)를 보세요.
+
+## HTML 엔티티
+
+JSX의 리터럴 텍스트에 HTML 엔티티를 넣을 수 있습니다.
+
+```javascript
+
First · Second
+```
+
+동적 콘텐츠 안에 HTML 엔티티를 표시하려 할 때, React에서는 XSS 공격을 광범위하게 막기 위해서 기본적으로 모든 표시하는 문자열을 이스케이프 하기 때문에 더블 이스케이프 문제에 부딪히게 됩니다.
+
+```javascript
+// 나쁨: "First · Second"를 표시
+
{'First · Second'}
+```
+
+이 이슈를 피해 갈 방법은 여럿 있지만, 가장 쉬운 방법은 유니코드 문자를 JavaScript에 직접 쓰는 것입니다. 브라우저가 올바르게 표시하도록 파일이 UTF-8으로 저장되어 있고 올바른 UTF-8 지시자를 사용하고 있는지 확인해야 합니다.
+
+```javascript
+
{'First · Second'}
+```
+
+더 안전한 대안으로 [엔티티에 대응하는 유니코드 숫자](http://www.fileformat.info/info/unicode/char/b7/index.htm)를 찾아 JavaScript 문자열 안에서 사용하는 방법도 있습니다.
+
+```javascript
+
{'First \u00b7 Second'}
+
{'First ' + String.fromCharCode(183) + ' Second'}
+```
+
+문자열과 JSX 엘리먼트를 혼합한 배열을 사용할 수도 있습니다.
+
+```javascript
+
{['First ', ·, ' Second']}
+```
+
+최후의 수단으로, 항상 [생 HTML을 삽입](/react/docs/dom-differences-ko-KR.html)할 수 있습니다.
+
+```javascript
+
+```
+
+
+## 커스텀 HTML 어트리뷰트
+
+프로퍼티를 HTML 사양에는 없는 네이티브 HTML 엘리먼트에 넘기면, React는 그 프로퍼티를 렌더하지 않습니다. 커스텀 어트리뷰트를 사용하고 싶다면, 접두사로 `data-`를 붙이셔야 합니다.
+
+```javascript
+
+```
+
+`aria-`로 시작하는 [Web 접근성](http://www.w3.org/WAI/intro/aria) 어트리뷰트는 제대로 렌더될 것입니다.
+
+```javascript
+
+```
diff --git a/docs/03-interactivity-and-dynamic-uis.ko-KR.md b/docs/03-interactivity-and-dynamic-uis.ko-KR.md
new file mode 100644
index 00000000..2abf5d85
--- /dev/null
+++ b/docs/03-interactivity-and-dynamic-uis.ko-KR.md
@@ -0,0 +1,86 @@
+---
+id: interactivity-and-dynamic-uis-ko-KR
+title: 상호 작용 및 동적 UI
+permalink: interactivity-and-dynamic-uis-ko-KR.html
+prev: jsx-gotchas-ko-KR.html
+next: multiple-components-ko-KR.html
+---
+
+이미 React에서 [어떻게 데이터를 표시](/react/docs/displaying-data-ko-KR.html)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠.
+
+
+## 간단한 예제
+
+```javascript
+var LikeButton = React.createClass({
+ getInitialState: function() {
+ return {liked: false};
+ },
+ handleClick: function(event) {
+ this.setState({liked: !this.state.liked});
+ },
+ render: function() {
+ var text = this.state.liked ? 'like' : 'haven\'t liked';
+ return (
+
+ You {text} this. Click to toggle.
+
+ );
+ }
+});
+
+React.render(
+ ,
+ document.getElementById('example')
+);
+```
+
+
+## 이벤트 핸들링과 통합적인(Synthetic) 이벤트
+
+React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 [W3C 사양](http://www.w3.org/TR/DOM-Level-3-Events/)과 같도록 보장됩니다.
+
+React를 폰이나 테블릿같은 터치 디바이스에서 사용하려 한다면, 간단히 `React.initializeTouchEvents(true);`로 터치 이벤트 핸들링을 켜면 됩니다.
+
+
+## 기본 구현: 오토바인딩과 이벤트 델리게이션
+
+코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.
+
+**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다. React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!
+
+**이벤트 델리게이션:** React는 실제로는 노드자신에게 이벤트 핸들러를 붙이지 않습니다. React가 시작되면 React는 탑 레벨의 단일 이벤트 리스너로 모든 이벤트를 리스닝하기 시작합니다. 컴포넌트가 마운트되거나 언마운트 될 때, 이벤트 핸들러는 그냥 내부 매핑에서 넣거나 뺄 뿐입니다. 이벤트가 발생하면, React는 이 매핑을 사용해서 어떻게 디스패치할 지를 알게 됩니다. 매핑에 이벤트 핸들러가 남아있지 않으면, React의 이벤트 핸들러는 그냥 아무것도 하지 않습니다. 왜 이 방식이 빠른지 더 알고 싶으시면, [David Walsh의 멋진 블로그 글](http://davidwalsh.name/event-delegate)을 읽어 보세요.
+
+
+## 컴포넌트는 그냥 state 머신일 뿐
+
+React는 UI를 간단한 state 머신이라 생각합니다. UI를 다양한 state와 그 state의 렌더링으로 생각함으로써 UI를 일관성 있게 관리하기 쉬워집니다.
+
+React에서는, 간단히 컴포넌트의 state를 업데이트하고, 이 새로운 state의 UI를 렌더링합니다. React는 DOM의 변경을 가장 효율적인 방법으로 관리해줍니다.
+
+
+## state의 동작 원리
+
+React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(data, callback)`을 호출하는 것입니다. 이 메소드는 `this.state`에 `data`를 머지하고 컴포넌트를 다시 렌더링 합니다. 컴포넌트의 재-렌더링이 끝나면, 생략가능한 `callback`이 호출됩니다. 대부분의 경우 React가 UI를 최신상태로 유지해주기 때문에 `callback`을 사용할 필요가 없습니다.
+
+
+## 어떤 컴포넌트가 state를 가져야 할까요?
+
+대부분의 컴포넌트는 `props`로부터 데이터를 받아 렌더할 뿐입니다만, 가끔 유저 인풋, 서버 요청, 시간의 경과에 반응해야 할 필요가 있습니다. 이럴 때 state를 사용합니다.
+
+**가능한 한 컴포넌트가 상태를 가지지 않도록(stateless) 하세요.** 이렇게 함으로써 가장 논리적인 장소로 state를 격리하게 되고 쉽게 애플리케이션을 추론할 수 있도록 중복을 최소화할 수 있습니다.
+
+일반적인 패턴은 데이터만 렌더하는 여러 상태를 가지지 않은 컴포넌트를 만들고, 그 위에 상태기반(stateful) 컴포넌트를 만들어 계층 안의 자식 컴포넌트에게 `props`를 통해 state를 전달하는 것입니다. state를 가지지 않은 컴포넌트가 선언적인 방법으로 데이터를 렌더링 하는 동안, 상태기반 컴포넌트는 모든 상호작용 로직을 캡슐화합니다.
+
+
+## state를 어떻게 *써야* 할까요?
+
+**state는 컴포넌트의 이벤트 핸들러에 의해 UI 업데이트를 트리거할때 변경될 가능성이 있어, 그때 사용할 데이터를 가져야 합니다.** 실제 앱에서는 이 데이터는 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태기반 컴포넌트를 만들때, 가능한 작게 state를 서술하고 `this.state`에만 저장하도록 해보세요. 그냥 `render()` 안에서 이 state를 기반으로 다른 모든 정보를 계산합니다. 이 방식으로 애플리케이션을 작성하고 생각하면 가장 최적의 애플리케이션으로 발전해가는 경향이 있다는 것을 발견하게 될 것입니다. 꼭 필요하지 않은 값이나 계산된 값을 state에 추가하는 것은 render가 그것을 계산하는 대신에 명시적으로 그것들을 맞춰줘야 하는 것을 의미하기 때문이죠.
+
+## state를 어떻게 *쓰지 말아야* 할까요?
+
+`this.state`는 UI의 state를 표현할 최소한의 데이터만을 가져야 합니다. 그래서 이런 것들을 가지지 않게끔 해야 합니다.
+
+* **계산된 데이터:** state에 따라 값을 미리 계산하는 것에 대해 염려하지 마세요. 계산은 모두 `render()`에서 하는 것이 UI의 일관성을 유지하기 쉽습니다. 예를 들어, state에서 list items 배열을 가지고 있고 문자열으로 카운트를 렌더링 할 경우, state에 저장하기보다는 그냥 `render()` 메소드안에서 `this.state.listItems.length + ' list items'`를 렌더하세요.
+* **React 컴포넌트:** 가지고 있는 props와 state로 `render()`안에서 만드세요.
+* **props에서 복사한 데이터:** 가능한 한 원래의 소스로 props를 사용하도록 해보세요. props를 state에 저장하는 단 하나의 올바른 사용법은 이전 값을 알고 싶을 때입니다. props는 시간이 지나면 변경될 수도 있기 때문이죠.
diff --git a/docs/04-multiple-components.ko-KR.md b/docs/04-multiple-components.ko-KR.md
new file mode 100644
index 00000000..8e48777a
--- /dev/null
+++ b/docs/04-multiple-components.ko-KR.md
@@ -0,0 +1,190 @@
+---
+id: multiple-components-ko-KR
+title: 복합 컴포넌트
+permalink: multiple-components-ko-KR.html
+prev: interactivity-and-dynamic-uis-ko-KR.html
+next: reusable-components-ko-KR.html
+---
+
+지금까지, 단일 컴포넌트에서 데이터를 표시하고 유저 입력을 다루는 것을 살펴보았습니다. 다음엔 React의 최고의 기능 중 하나인 조합가능성(composability)을 살펴봅시다.
+
+
+## 동기: 관심의 분리
+
+명확히 정의된 인터페이스와 다른 컴포넌트를 재사용해 모듈러 컴포넌트를 구축하면, 함수와 클래스를 이용했을 때 얻을 수 있는 이점 대부분을 얻을 수 있습니다. 특히 앱에서 *다른 관심을 분리*할 수 있습니다.아무리 간단히 새 컴포넌트를 만들었다고 해도 말이죠. 당신의 애플리케이션에서 쓸 커스텀 컴포넌트 라이브러리를 만들어서, 당신의 도메인에 최적화된 방법으로 UI를 표현할 수 있게 됩니다.
+
+
+## 조합(Composition) 예제
+
+간단히 페이스북 그래프 API를 사용해 프로필 사진과 유저이름을 보여주는 아바타 컴포넌트를 만든다고 합시다.
+
+```javascript
+var Avatar = React.createClass({
+ render: function() {
+ return (
+
+
+
+
+ );
+ }
+});
+
+var ProfilePic = React.createClass({
+ render: function() {
+ return (
+
+ );
+ }
+});
+
+var ProfileLink = React.createClass({
+ render: function() {
+ return (
+
+ {this.props.username}
+
+ );
+ }
+});
+
+React.render(
+ ,
+ document.getElementById('example')
+);
+```
+
+
+## 소유권(Ownership)
+
+위의 예제에서, `Avatar` 인스턴스는 `ProfilePic`과 `ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메소드 안에서 만들어졌다면, `Y`가 `X`를 *소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 중요한 성질은 UI가 일관성 있도록 해줍니다.
+
+소유(owner-ownee)관계와 부모·자식 관계를 구별하는 것은 중요합니다. 부모·자식 관계가 DOM에서부터 쓰던 익숙하고 이미 알고있던 단순한 것인 한편, 소유관계는 React 고유의 것입니다. 위의 예제에서, `Avatar`는 `div`, `ProfilePic`, `ProfileLink`인스턴스를 소유하고, `div`는 `ProfilePic`과 `ProfileLink`인스턴스의 (소유자가 아닌) **부모**입니다.
+
+
+## 자식
+
+React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트나 JavaScript 표현식을 시작과 끝 태그 사이에 넣을 수 있습니다. 이렇게 말이죠.
+
+```javascript
+
+```
+
+`Parent`는 `this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](/react/docs/top-level-api-ko-KR.html#react.children)를 사용해 자식들을 관리합니다.
+
+
+### 자식 Reconciliation (비교조정)
+
+**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 랜더 패스가 있다고 해봅시다.
+
+```html
+// Render Pass 1
+
+
Paragraph 1
+
Paragraph 2
+
+// Render Pass 2
+
+
Paragraph 2
+
+```
+
+직관적으로 보면, `
Paragraph 1
`가 없어졌습니다만 그러는 대신에, React는 첫 번째 자식의 텍스트를 비교조정하고 마지막 자식을 파괴하도록 DOM을 비교조정할 것입니다. React는 자식들의 *순서*에 따라 비교조정합니다.
+
+
+### 상태기반(Stateful) 자식
+
+대부분의 컴포넌트에서는, 이것은 큰 문제가 아닙니다. 하지만 렌더 패스 간에 `this.state`를 유지하는 상태기반의 컴포넌트에서는 매우 문제가 될 수 있습니다.
+
+대부분의 경우, 이 문제는 엘리먼트를 파괴하지 않고 숨김으로써 피해갈 수 있습니다.
+
+```html
+// Render Pass 1
+
+
Paragraph 1
+
Paragraph 2
+
+// Render Pass 2
+
+
Paragraph 1
+
Paragraph 2
+
+```
+
+
+
+### 동적 자식
+
+자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 랜더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다.
+
+```javascript
+ render: function() {
+ var results = this.props.results;
+ return (
+
+ {results.map(function(result) {
+ return
{result.text}
;
+ })}
+
+ );
+ }
+```
+
+React가 키가 있는 자식들을 비교조정할 때, React는 `key`가 있는 자식이 (오염(clobbered)되는 대신) 재배치되고 (재사용되는 대신) 파괴되도록 보장할 것입니다.
+
+`key`는 *항상* 배열 안의 각 컴포넌트의 컨테이너 HTML 자식이 아닌 컴포넌트에게 직접 주어져야 합니다.
+
+```javascript
+// 틀림!
+var ListItemWrapper = React.createClass({
+ render: function() {
+ return
+ );
+ }
+});
+```
+
+ReactFragment 객체를 넘기는 것으로 자식에 키를 할당할 수도 있습니다. 자세한 내용은 [키가 할당된 프래그먼트](create-fragment-ko-KR.html)를 참고하세요.
+
+## 데이터 흐름
+
+React에서 데이터는 위에서 말한 것처럼 `props`를 통해 소유자로부터 소유한 컴포넌트로 흐릅니다. 이것은 사실상 단방향 데이터 바인딩입니다. 소유자는 `props`나 `state`를 기준으로 계산한 어떤 값으로 소유한 컴포넌트의 props를 바인드합니다. 이 과정은 재귀적으로 발생하므로, 데이터의 변경은 자동으로 모든 곳에 반영됩니다.
+
+
+## 성능의 주의점
+
+소유자가 가지고 있는 노드의 수가 많아지면 데이터의 변화에 반응하는 비용이 증가할 것으로 생각할 수도 있습니다. 좋은 소식은 JavaScript의 속도는 빠르고 `render()` 메소드는 꽤 간단한 경향이 있어, 대부분 애플리케이션에서 매우 빠르다는 점입니다. 덧붙여, 대부분의 병목 현상은 JS 실행이 아닌 DOM 변경에서 일어나고, React는 배치와 탐지 변경을 이용해 최적화해 줍니다.
+
+하지만, 가끔 성능을 위해 정교하게 제어해야 할 때도 있습니다. 이런 경우, React가 서브트리의 처리를 건너 뛰도록 간단히 `shouldComponentUpdate()`를 오버라이드해 false를 리턴하게 할 수 있습니다. 좀 더 자세한 정보는 [React 참조 문서](/react/docs/component-specs-ko-KR.html)를 보세요.
+
+> 주의:
+>
+> 데이터가 실제로는 변경되었지만 `shouldComponentUpdate()`가 false를 리턴한다면 React는 UI를 싱크시킬수 없습니다. 이 기능을 사용할 때에는 자신이 지금 무엇을 하고 있는지 알고 있고, 눈에 띄는 성능 문제가 있을 경우에만 사용하세요. JavaScript는 DOM에 비해 빠릅니다. 과소평가하지 마세요.
diff --git a/docs/05-reusable-components.ko-KR.md b/docs/05-reusable-components.ko-KR.md
new file mode 100644
index 00000000..41980a58
--- /dev/null
+++ b/docs/05-reusable-components.ko-KR.md
@@ -0,0 +1,231 @@
+---
+id: reusable-components-ko-KR
+title: 재사용가능한 컴포넌트
+permalink: reusable-components-ko-KR.html
+prev: multiple-components-ko-KR.html
+next: transferring-props-ko-KR.html
+---
+
+인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠.
+
+
+## Prop 검증
+
+앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다.
+
+```javascript
+React.createClass({
+ propTypes: {
+ // 특정 JavaScript 프리미티브 타입에 대한 prop을 명시할 수 있습니다.
+ // 기본적으로 이것들은 모두 선택적입니다.
+ optionalArray: React.PropTypes.array,
+ optionalBool: React.PropTypes.bool,
+ optionalFunc: React.PropTypes.func,
+ optionalNumber: React.PropTypes.number,
+ optionalObject: React.PropTypes.object,
+ optionalString: React.PropTypes.string,
+
+ // 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소
+ // 이것들을 포함하는 배열이나 엘리먼트
+ optionalNode: React.PropTypes.node,
+
+ // React 엘리먼트
+ optionalElement: React.PropTypes.element,
+
+ // 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof
+ // 연산자를 사용합니다.
+ optionalMessage: React.PropTypes.instanceOf(Message),
+
+ // 열거형처럼 특정 값들로만 prop을 제한해서 사용할 수 있습니다.
+ optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
+
+ // 많은 타입들 중 하나로 사용할 수 있는 객체가 될 수도 있습니다.
+ optionalUnion: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.number,
+ React.PropTypes.instanceOf(Message)
+ ]),
+
+ // 특정 타입의 배열
+ optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+
+ // 특정 타입의 속성값을 갖는 객체
+ optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+
+ // 특정한 형태(shape)의 객체
+ optionalObjectWithShape: React.PropTypes.shape({
+ color: React.PropTypes.string,
+ fontSize: React.PropTypes.number
+ }),
+
+ // 위에 언급된 것들을 `isRequired`로 연결해서 prop이 제공되지 않을 때 경고를
+ // 띄우도록 할 수도 있습니다.
+ requiredFunc: React.PropTypes.func.isRequired,
+
+ // 어떤 데이터 타입도 가능
+ requiredAny: React.PropTypes.any.isRequired,
+
+ // 물론 사용자 정의 검증자도 지정할 수 있습니다. 이는 검증이 실패했을 때
+ // Error 객체를 리턴해야합니다. `console.warn`을 이나 throw를 하면 안됩니다.
+ // 그렇게하면 `oneOfType` 안에서 작동하지 않습니다.
+ customProp: function(props, propName, componentName) {
+ if (!/matchme/.test(props[propName])) {
+ return new Error('Validation failed!');
+ }
+ }
+ },
+ /* ... */
+});
+```
+
+
+## 기본 Prop 값
+
+React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다.
+
+```javascript
+var ComponentWithDefaultProps = React.createClass({
+ getDefaultProps: function() {
+ return {
+ value: 'default value'
+ };
+ }
+ /* ... */
+});
+```
+
+`getDefaultProps()`의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록 해주는데 사용됩니다.`getDefaultProps()`를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다.
+
+## Prop 전달하기: 단축
+
+React 컴포넌트의 흔히 그냥 기본 HTML을 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다.
+
+```javascript
+var CheckLink = React.createClass({
+ render: function() {
+ // 모든 prop을 받아서 CheckLink에 넘기고 에 복사합니다.
+ return {'√ '}{this.props.children};
+ }
+});
+
+React.render(
+
+ Click here!
+ ,
+ document.getElementById('example')
+);
+```
+
+## 단일 자식
+
+`React.PropTypes.element`을 통해 컴포넌트에 한 자식만 보내도록 명시할 수 있습니다.
+
+```javascript
+var MyComponent = React.createClass({
+ propTypes: {
+ children: React.PropTypes.element.isRequired
+ },
+
+ render: function() {
+ return (
+
+ {this.props.children} // 정확히 한 엘리먼트여야만 하며, 아니면 에러가 발생합니다.
+
+ );
+ }
+
+});
+```
+
+## 믹스인
+
+컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](http://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
+
+예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
+
+```javascript
+var SetIntervalMixin = {
+ componentWillMount: function() {
+ this.intervals = [];
+ },
+ setInterval: function() {
+ this.intervals.push(setInterval.apply(null, arguments));
+ },
+ componentWillUnmount: function() {
+ this.intervals.map(clearInterval);
+ }
+};
+
+var TickTock = React.createClass({
+ mixins: [SetIntervalMixin], // 믹스인 사용
+ getInitialState: function() {
+ return {seconds: 0};
+ },
+ componentDidMount: function() {
+ this.setInterval(this.tick, 1000); // 믹스인에 있는 메소드를 호출
+ },
+ tick: function() {
+ this.setState({seconds: this.state.seconds + 1});
+ },
+ render: function() {
+ return (
+
+ React has been running for {this.state.seconds} seconds.
+
+ );
+ }
+});
+
+React.render(
+ ,
+ document.getElementById('example')
+);
+```
+
+믹스인의 괜찮은 점은 컴포넌트가 여러 믹스인을 사용하고 여러 믹스인에서 같은 생명주기 메소드를 사용할 때(예를 들어, 여러 믹스인에서 컴포넌트가 사라질 때 뭔가 정리하려 한다면) 모든 생명주기 메소드들의 실행은 보장됩니다. 믹스인에 정의된 메소드은 컴포넌트의 메소드가 호출됨에 따라 믹스인이 나열된 순서대로 실행됩니다.
+
+## ES6 클래스
+
+React 클래스를 일반적인 JavaScript 클래스로 선언할 수도 있습니다. 다음의 예제는 ES6 클래스 문법을 사용합니다:
+
+```javascript
+class HelloMessage extends React.Component {
+ render() {
+ return
Hello {this.props.name}
;
+ }
+}
+React.render(, mountNode);
+```
+
+API는 `getInitialState`를 제외하고 `React.createClass`와 유사합니다. 별도의 `getInitialState` 메소드 대신에, 필요한 `state` 프로퍼티를 생성자에서 설정할 수 있습니다.
+
+또다른 차이점은 `propTypes`와 `defaultProps`가 클래스의 내부가 아니라 생성자의 프로퍼티로 정의되어 있다는 것입니다.
+
+```javascript
+export class Counter extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {count: props.initialCount};
+ }
+ tick() {
+ this.setState({count: this.state.count + 1});
+ }
+ render() {
+ return (
+
+ Clicks: {this.state.count}
+
+ );
+ }
+}
+Counter.propTypes = { initialCount: React.PropTypes.number };
+Counter.defaultProps = { initialCount: 0 };
+```
+
+### 자동 바인딩 안됨
+
+메소드는 일반 ES6 클래스와 동일한 시멘틱을 따릅니다. `this`를 인스턴스에 자동으로 바인딩하지 않는다는 이야기입니다. 명시적으로 `.bind(this)`나 화살표 함수(arrow function)을 사용하세요.
+
+### 믹스인 안됨
+
+불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다.
diff --git a/docs/06-transferring-props.ko-KR.md b/docs/06-transferring-props.ko-KR.md
new file mode 100644
index 00000000..296d8c4f
--- /dev/null
+++ b/docs/06-transferring-props.ko-KR.md
@@ -0,0 +1,164 @@
+---
+id: transferring-props-ko-KR
+title: Props 전달
+permalink: transferring-props-ko-KR.html
+prev: reusable-components-ko-KR.html
+next: forms-ko-KR.html
+---
+
+React에서는 컴포넌트를 감싸서 추상화하는 것이 일반적인 패턴입니다. 외부 컴포넌트에서는 간단한 프로퍼티만을 노출하여 복잡한 세부 구현을 감출 수 있습니다.
+
+[JSX 스프레드 어트리뷰트](/react/docs/jsx-spread-ko-KR.html)를 통해 props에 추가적인 값을 병합할 수 있습니다.
+
+```javascript
+return ;
+```
+
+만약 JSX를 사용하지 않는다면 ES6의 `Object.assign`나 Underscore의 `_.extend` 같은 객체 헬퍼를 사용할 수 있습니다:
+
+```javascript
+return Component(Object.assign({}, this.props, { more: 'values' }));
+```
+
+이 튜토리얼의 나머지 부분은 모범 답안을 소개할 것입니다. JSX와 실험적인 ES7 구문을 사용합니다.
+
+## 수동적인 전달
+
+대부분의 경우 명시적으로 프로퍼티를 아래로 전달해야 합니다. 이는 동작을 확신하는 내부 API의 일부만 공개하도록 합니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+ render: function() {
+ var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+ return (
+