@samitouri / QOS-React-2 / commits / 7dc818a95a

Translate 06 to Korean

- Up to 8326a9f

Jinwoo Oh committed Mar 9, 2015 at 21:14 UTC 7dc818a95af60c3024b2afaf7f111019e8816264
1 file changed +164
docs/docs/06-transferring-props.ko-KR.md new
+164
@@ -0,0 +1,164 @@
1 +---
2 +id: transferring-props-ko-KR
3 +title: Props 전달
4 +permalink: transferring-props-ko-KR.html
5 +prev: reusable-components-ko-KR.html
6 +next: forms-ko-KR.html
7 +---
8 +
9 +React에서는 컴포넌트를 감싸서 추상화하는 것이 일반적인 패턴입니다. 외부 컴포넌트에서는 간단한 프로퍼티만을 노출하여 복잡한 세부 구현을 감출 수 있습니다.
10 +
11 +[JSX 스프레드 어트리뷰트](/react/docs/jsx-spread-ko-KR.html)를 통해 props에 추가적인 값을 병합할 수 있습니다.
12 +
13 +```javascript
14 +return <Component {...this.props} more="values" />;
15 +```
16 +
17 +만약 JSX를 사용하지 않는다면 ES6의 `Object.assign`나 Underscore의 `_.extend` 같은 객체 헬퍼를 사용할 수 있습니다:
18 +
19 +```javascript
20 +return Component(Object.assign({}, this.props, { more: 'values' }));
21 +```
22 +
23 +이 튜토리얼의 나머지 부분은 모범 답안을 소개할 것입니다. JSX와 실험적인 ES7 구문을 사용합니다.
24 +
25 +## 수동적인 전달
26 +
27 +대부분의 경우 명시적으로 프로퍼티를 아래로 전달해야 합니다. 이는 동작을 확신하는 내부 API의 일부만 공개하도록 합니다.
28 +
29 +```javascript
30 +var FancyCheckbox = React.createClass({
31 + render: function() {
32 + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
33 + return (
34 + <div className={fancyClass} onClick={this.props.onClick}>
35 + {this.props.children}
36 + </div>
37 + );
38 + }
39 +});
40 +React.render(
41 + <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
42 + 세상아 안녕!
43 + </FancyCheckbox>,
44 + document.body
45 +);
46 +```
47 +
48 +하지만 `name`이나 `title`, `onMouseOver` 같은 prop들이 더 추가된다면 어떨까요?
49 +
50 +## JSX에서 `...`를 사용해 전달하기
51 +
52 +> 주의:
53 +>
54 +> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, `<script type="text/jsx;harmony=true">`를 사용해 스크립트를 작성하세요. 자세히 알아보려면 아래의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](http://facebook.github.io/react/docs/transferring-props-ko-KR.html#rest-and-spread-properties-...)를 확인하세요.
55 +
56 +때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.
57 +
58 +소비할 프로퍼티들을 나열하고, 그 뒤에 `...other`를 넣습니다.
59 +
60 +```javascript
61 +var { checked, ...other } = this.props;
62 +```
63 +
64 +이는 지금 소비한 props를 *제외한* 나머지를 아래로 전달합니다.
65 +
66 +```javascript
67 +var FancyCheckbox = React.createClass({
68 + render: function() {
69 + var { checked, ...other } = this.props;
70 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
71 + // `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
72 + return (
73 + <div {...other} className={fancyClass} />
74 + );
75 + }
76 +});
77 +React.render(
78 + <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
79 + 세상아 안녕!
80 + </FancyCheckbox>,
81 + document.body
82 +);
83 +```
84 +
85 +> 주의:
86 +>
87 +> 위의 예제에서는 `checked` prop 또한 마찬가지로 유효한 DOM 어트리뷰트입니다. 이런 식으로 구조의 해체(destructuring)를 하지 않으면 의도하지 않게 함께 전달될 수 있습니다.
88 +
89 +미상의 `other` props을 전달할 때는 항상 구조 해체 패턴을 사용하세요.
90 +
91 +```javascript
92 +var FancyCheckbox = React.createClass({
93 + render: function() {
94 + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
95 + // 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
96 + return (
97 + <div {...this.props} className={fancyClass} />
98 + );
99 + }
100 +});
101 +```
102 +
103 +## 같은 Prop을 소비하고 전달하기
104 +
105 +컴포넌트가 프로퍼티를 사용하지만 계속 넘겨야한다면, `checked={checked}`처럼 명시적으로 다시 넘길 수 있습니다. 리팩토링과 린트(lint)하기가 더 쉬우므로 이 방식이 `this.props` 객체 전부를 넘기는 것보다 낫습니다.
106 +
107 +```javascript
108 +var FancyCheckbox = React.createClass({
109 + render: function() {
110 + var { checked, title, ...other } = this.props;
111 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
112 + var fancyTitle = checked ? 'X ' + title : 'O ' + title;
113 + return (
114 + <label>
115 + <input {...other}
116 + checked={checked}
117 + className={fancyClass}
118 + type="checkbox"
119 + />
120 + {fancyTitle}
121 + </label>
122 + );
123 + }
124 +});
125 +```
126 +
127 +> 주의:
128 +>
129 +> 순서는 중요합니다. `{...other}`를 JSX props 이전에 넣는 것으로 컴포넌트의 사용자가 확실히 그것들을 오버라이드 할 수 없게 합니다. 위의 예제에서는 input이 `"checkbox"` 타입인 것을 보장합니다.
130 +
131 +<a name="rest-and-spread-properties-..."></a>
132 +## 잔여 프로퍼티와 스프레드 프로퍼티 `...`
133 +
134 +잔여(Rest, `...`) 프로퍼티는 객체에서 소비되지 않은 나머지 프로퍼티를 추출해 새로운 객체로 만들 수 있게 해 줍니다. 구조 해체 패턴에서 열거된 다른 프로퍼티들은 모두 제외됩니다.
135 +
136 +이는 [ES7 제안](https://github.com/sebmarkbage/ecmascript-rest-spread)의 실험적인 구현체입니다.
137 +
138 +```javascript
139 +var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
140 +x; // 1
141 +y; // 2
142 +z; // { a: 3, b: 4 }
143 +```
144 +
145 +> 주의:
146 +>
147 +> 실험적인 ES7 구문을 활성화하려면 [JSX 커맨드라인 도구](http://npmjs.org/package/react-tools)를 `--harmony` 플래그와 함께 사용하세요.
148 +
149 +## Underscore로 전달 다루기
150 +
151 +JSX를 사용하지 않는다면 라이브러리를 사용해 같은 패턴을 쓸 수 있습니다. Underscore에서는 `_.omit`을 사용해 특정 프로퍼티를 제외하거나 `_.extend`를 사용해 새로운 객체로 프로퍼티를 복사할 수 있습니다.
152 +
153 +```javascript
154 +var FancyCheckbox = React.createClass({
155 + render: function() {
156 + var checked = this.props.checked;
157 + var other = _.omit(this.props, 'checked');
158 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
159 + return (
160 + React.DOM.div(_.extend({}, other, { className: fancyClass }))
161 + );
162 + }
163 +});
164 +```