translation of 05-reusable-components-ko-KR.md
Seoh Char committed
Feb 4, 2015 at 18:37 UTC
4aeb3060647f686b8627a9f696664d48d9c8a79a
1 file changed
+183
docs/docs/05-reusable-components.ko-KR.md
new
+183
@@ -0,0 +1,183 @@
1
+---
2
+id: reusable-components-ko-KR
3
+title: 재사용가능한 컴포넌트
4
+permalink: reusable-components.ko-KR.html
5
+prev: multiple-components.ko-KR.html
6
+next: transferring-props.ko-KR.html
7
+---
8
+
9
+인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포턴트 등)을 잘 정의된 인터페이스의 재사용가능한 컴포턴트로 분해합니다. 그런 방법으로 다음에 어떤 UI를 구축할 필요가 있을 때 훨씬 적은 코드로 만들 수 있는데, 즉 더 빠른 개발 시간, 더 적은 버그, 그리고 더 적은 용량으로 달서할 수 있다는 뜻입니다.
10
+
11
+## Prop 검증
12
+
13
+앱을 개발할 때 컴포넌트들이 정확히 사용되었는지 확인하는게 도움이 됩니다. 저희는 이것을 `propTypes`를 명시하는 것으로 제공합니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 검증자(validator)의 범위를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발중일 때만 확인하기를 권합니다. 각각의 검증자들을 명시하는지에 대한 예제가 있습니다:
14
+
15
+```javascript
16
+React.createClass({
17
+ propTypes: {
18
+ // 특정 JavaScript 프리미티브 타입에 대한 prop을 명시할 수 있습니다.
19
+ // 기본적으로 이것들은 모두 옵셔널입니다.
20
+ optionalArray: React.PropTypes.array,
21
+ optionalBool: React.PropTypes.bool,
22
+ optionalFunc: React.PropTypes.func,
23
+ optionalNumber: React.PropTypes.number,
24
+ optionalObject: React.PropTypes.object,
25
+ optionalString: React.PropTypes.string,
26
+
27
+ // 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소, 그리고 이것들을 포함하는 배열
28
+ optionalNode: React.PropTypes.node,
29
+
30
+ // React 엘리먼트
31
+ optionalElement: React.PropTypes.element,
32
+
33
+ // 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof 연산자를
34
+ // 사용합니다.
35
+ optionalMessage: React.PropTypes.instanceOf(Message),
36
+
37
+ // 열거형처럼 특정 값들로만 prop을 제한해서 사용할 수 있습니다.
38
+ optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
39
+
40
+ // 많은 타입들 중 하나로 사용할 수 있는 객체가 될 수도 있습니다.
41
+ optionalUnion: React.PropTypes.oneOfType([
42
+ React.PropTypes.string,
43
+ React.PropTypes.number,
44
+ React.PropTypes.instanceOf(Message)
45
+ ]),
46
+
47
+ // 특정 타입의 배열
48
+ optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
49
+
50
+ // 특정 타입의 속성값을 갖는 객체
51
+ optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
52
+
53
+ // 특정하 형태(shape)를 취하는 객체
54
+ optionalObjectWithShape: React.PropTypes.shape({
55
+ color: React.PropTypes.string,
56
+ fontSize: React.PropTypes.number
57
+ }),
58
+
59
+ // 위에 언급된 것들을 `isRequired`로 체이닝해서 prop이 제공되지 않을 때 경고를 띄우도록 할 수도
60
+ // 있습니다.
61
+ requiredFunc: React.PropTypes.func.isRequired,
62
+
63
+ // 어떤 데이터 타입도 가능
64
+ requiredAny: React.PropTypes.any.isRequired,
65
+
66
+ // 물론 커스텀 검증자도 명시할 수 있습니다. 검증이 실패했을 때 Error 객체를 리턴해야합니다.
67
+ // `console.warn`을 사용하거나 throw를 사용하면 안되고 `oneOfType` 안에서는 작동하지
68
+ // 않습니다.
69
+ customProp: function(props, propName, componentName) {
70
+ if (!/matchme/.test(props[propName])) {
71
+ return new Error('Validation failed!');
72
+ }
73
+ }
74
+ },
75
+ /* ... */
76
+});
77
+```
78
+
79
+
80
+## 기본 Prop 값
81
+
82
+React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다:
83
+
84
+```javascript
85
+var ComponentWithDefaultProps = React.createClass({
86
+ getDefaultProps: function() {
87
+ return {
88
+ value: 'default value'
89
+ };
90
+ }
91
+ /* ... */
92
+});
93
+```
94
+
95
+`getDefaultProps()`의 결과값은 캐싱이 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록해주는데 사용됩니다. 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용하도록 해줍니다.
96
+
97
+## Prop 전달하기: 기본
98
+
99
+React 컴포넌트의 흔한 타입 중 하나는 단순히 기본 HTML을 확장하는 것입니다. 타이핑을 아끼기 위해 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 때가 생길 것입니다. JSX의 _spread_ 문법을 사용해 이렇게 만들 수 있습니다:
100
+
101
+```javascript
102
+var CheckLink = React.createClass({
103
+ render: function() {
104
+ // 아무 prop들을 받아서 CheckLink에 넘겨 <a>에 복사합니다.
105
+ return <a {...this.props}>{'√ '}{this.props.children}</a>;
106
+ }
107
+});
108
+
109
+React.render(
110
+ <CheckLink href="/checked.html">
111
+ Click here!
112
+ </CheckLink>,
113
+ document.getElementById('example')
114
+);
115
+```
116
+
117
+## Single Child
118
+
119
+`React.PropTypes.element`을 통해 컴포넌트에 자식을 단 하나만 보내도록 명시할 수 있습니다.
120
+
121
+```javascript
122
+var MyComponent = React.createClass({
123
+ propTypes: {
124
+ children: React.PropTypes.element.isRequired
125
+ },
126
+
127
+ render: function() {
128
+ return (
129
+ <div>
130
+ {this.props.children} // 정확히 한 엘리먼트여야만 하며, 아니면 에러가 발생합니다.
131
+ </div>
132
+ );
133
+ }
134
+
135
+});
136
+```
137
+
138
+## 믹스인
139
+
140
+컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 기능이 약간 겹치는 너무 다른 컴포넌트가 있을 수 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](http://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 이 문제를 해결하기 위해 `mixins`를 제공합니다.
141
+
142
+한가지 흔한 경우는 주기적으로 업데이트되는 컴포넌트입니다. `setInterval()`을 사용하면 쉽지만, 더이상 원치 않을 때 메모리를 아끼기 위해 주기를 취소하는 것은 중요합니다. React는 컴포넌트가 막 생성될 때 혹은 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
143
+
144
+```javascript
145
+var SetIntervalMixin = {
146
+ componentWillMount: function() {
147
+ this.intervals = [];
148
+ },
149
+ setInterval: function() {
150
+ this.intervals.push(setInterval.apply(null, arguments));
151
+ },
152
+ componentWillUnmount: function() {
153
+ this.intervals.map(clearInterval);
154
+ }
155
+};
156
+
157
+var TickTock = React.createClass({
158
+ mixins: [SetIntervalMixin], // 믹스인 사용
159
+ getInitialState: function() {
160
+ return {seconds: 0};
161
+ },
162
+ componentDidMount: function() {
163
+ this.setInterval(this.tick, 1000); 믹스인에 있는 메소드를 호출
164
+ },
165
+ tick: function() {
166
+ this.setState({seconds: this.state.seconds + 1});
167
+ },
168
+ render: function() {
169
+ return (
170
+ <p>
171
+ React has been running for {this.state.seconds} seconds.
172
+ </p>
173
+ );
174
+ }
175
+});
176
+
177
+React.render(
178
+ <TickTock />,
179
+ document.getElementById('example')
180
+);
181
+```
182
+
183
+믹스인의 괜찮은 점은 컴포넌트가 같은 생명주기 메소드를 사용할 때(예를 들어, 컴포넌트가 사라질 때 뭔가 정리하려는 믹스인들이 많이 있다면) 모든 생명주기 메소드들이 실행되는게 보장된다. 믹스인에 정의된 메소드들은 믹스인이 나열된 순서대로 컴포넌트의 메소드 호출 다음에 실행된다.
\ No newline at end of file