From 1f6272b567f2a8299a7568e06fb5f73a007f188e Mon Sep 17 00:00:00 2001
From: Jinwoo Oh <arkist@gmail.com>
Date: Mon, 9 Mar 2015 21:14:03 +0900
Subject: [PATCH] Translate 06 to Korean

- Up to 8326a9f
---
 docs/06-transferring-props.ko-KR.md | 164 ++++++++++++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 docs/06-transferring-props.ko-KR.md

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 <Component {...this.props} more="values" />;
+```
+
+만약 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 (
+      <div className={fancyClass} onClick={this.props.onClick}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
+    세상아 안녕!
+  </FancyCheckbox>,
+  document.body
+);
+```
+
+하지만 `name`이나 `title`, `onMouseOver` 같은 prop들이 더 추가된다면 어떨까요?
+
+## JSX에서 `...`를 사용해 전달하기
+
+> 주의:
+> 
+> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, `<script type="text/jsx;harmony=true">`를 사용해 스크립트를 작성하세요. 자세히 알아보려면 아래의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](http://facebook.github.io/react/docs/transferring-props-ko-KR.html#rest-and-spread-properties-...)를 확인하세요.
+
+때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.
+
+소비할 프로퍼티들을 나열하고, 그 뒤에 `...other`를 넣습니다.
+
+```javascript
+var { checked, ...other } = this.props;
+```
+
+이는 지금 소비한 props를 *제외한* 나머지를 아래로 전달합니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    // `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
+    return (
+      <div {...other} className={fancyClass} />
+    );
+  }
+});
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
+    세상아 안녕!
+  </FancyCheckbox>,
+  document.body
+);
+```
+
+> 주의:
+> 
+> 위의 예제에서는 `checked` prop 또한 마찬가지로 유효한 DOM 어트리뷰트입니다. 이런 식으로 구조의 해체(destructuring)를 하지 않으면 의도하지 않게 함께 전달될 수 있습니다.
+
+미상의 `other` props을 전달할 때는 항상 구조 해체 패턴을 사용하세요.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+    // 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
+    return (
+      <div {...this.props} className={fancyClass} />
+    );
+  }
+});
+```
+
+## 같은 Prop을 소비하고 전달하기
+
+컴포넌트가 프로퍼티를 사용하지만 계속 넘겨야한다면, `checked={checked}`처럼 명시적으로 다시 넘길 수 있습니다. 리팩토링과 린트(lint)하기가 더 쉬우므로 이 방식이 `this.props` 객체 전부를 넘기는 것보다 낫습니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, title, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    var fancyTitle = checked ? 'X ' + title : 'O ' + title;
+    return (
+      <label>
+        <input {...other}
+          checked={checked}
+          className={fancyClass}
+          type="checkbox"
+        />
+        {fancyTitle}
+      </label>
+    );
+  }
+});
+```
+
+> 주의:
+> 
+> 순서는 중요합니다. `{...other}`를 JSX props 이전에 넣는 것으로 컴포넌트의 사용자가 확실히 그것들을 오버라이드 할 수 없게 합니다. 위의 예제에서는 input이 `"checkbox"` 타입인 것을 보장합니다.
+
+<a name="rest-and-spread-properties-..."></a>
+## 잔여 프로퍼티와 스프레드 프로퍼티 `...`
+
+잔여(Rest, `...`) 프로퍼티는 객체에서 소비되지 않은 나머지 프로퍼티를 추출해 새로운 객체로 만들 수 있게 해 줍니다. 구조 해체 패턴에서 열거된 다른 프로퍼티들은 모두 제외됩니다.
+
+이는 [ES7 제안](https://github.com/sebmarkbage/ecmascript-rest-spread)의 실험적인 구현체입니다.
+
+```javascript
+var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
+x; // 1
+y; // 2
+z; // { a: 3, b: 4 }
+```
+
+> 주의:
+>
+> 실험적인 ES7 구문을 활성화하려면 [JSX 커맨드라인 도구](http://npmjs.org/package/react-tools)를 `--harmony` 플래그와 함께 사용하세요.
+
+## Underscore로 전달 다루기
+
+JSX를 사용하지 않는다면 라이브러리를 사용해 같은 패턴을 쓸 수 있습니다. Underscore에서는 `_.omit`을 사용해 특정 프로퍼티를 제외하거나 `_.extend`를 사용해 새로운 객체로 프로퍼티를 복사할 수 있습니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var checked = this.props.checked;
+    var other = _.omit(this.props, 'checked');
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    return (
+      React.DOM.div(_.extend({}, other, { className: fancyClass }))
+    );
+  }
+});
+```