@samitouri / QOS-React-2 / commits / 87d6c59ebf

Create ref-03-component-specs.ko-KR.md

Based on 08c5e42649c85048b9035b3485c7b675e99ade3c

Taeho Kim committed Jan 31, 2015 at 01:01 UTC 87d6c59ebf0726f139cfd80dcec31e7e8d93a443
1 file changed +215
docs/docs/ref-03-component-specs.ko-KR.md new
+215
@@ -0,0 +1,215 @@
1 +---
2 +id: component-specs-ko-KR
3 +title: 컴포넌트 명세와 생명주기
4 +permalink: component-specs.ko-KR.html
5 +prev: component-api.ko-KR.html
6 +next: tags-and-attributes.ko-KR.html
7 +---
8 +
9 +## 컴포넌트 명세
10 +
11 +`React.createClass()`를 호출하여 컴포넌트 클래스를 생성할 때, `render` 메소드를 포함한 명세 객체를 제공해야 합니다. 또한 필요한 경우 여기에서 설명하는 다른 생명주기 메소드를 명세 객체에 추가로 제공할 수 있습니다.
12 +
13 +
14 +### render
15 +
16 +```javascript
17 +ReactComponent render()
18 +```
19 +
20 +`render()` 메소드는 필수 항목입니다.
21 +
22 +호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 컴포넌트를 리턴합니다. 이 자식 컴포넌트는 네이티브 DOM 컴포넌트의 가상 표현 (`<div />`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.
23 +
24 +아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `<noscript>` 태그를 렌더링합니다. `null`이나 `false`를 리턴한 경우, `this.getDOMNode()`는 `null`을 리턴합니다.
25 +
26 +`render()` 함수는 순수 함수여야 합니다. 즉, 컴포넌트의 상태를 변경하지 않고, 여러번 호출해도 같은 결과를 리턴하며, DOM을 읽고 쓰거나 브라우저와 상호작용(예를 들어 `setTimeout`를 사용)하지 않아야 합니다. 브라우저와 상호작용해야 한다면 `componentDidMount()`나 다른 생명주기 메소드에서 수행해야 합니다. `render()` 함수를 순수 함수로 유지하면 서버 렌더링이 훨씬 쓸만해지고 컴포넌트에 대해 생각하기 쉬워집니다.
27 +
28 +
29 +### getInitialState
30 +
31 +```javascript
32 +object getInitialState()
33 +```
34 +
35 +컴포넌트가 마운트되기 전에 한번 호출됩니다. 리턴값은 `this.state`의 초기값으로 사용됩니다.
36 +
37 +
38 +### getDefaultProps
39 +
40 +```javascript
41 +object getDefaultProps()
42 +```
43 +
44 +클래스가 생성될 때 한번 호출되고 캐시됩니다. 부모 컴포넌트에서 prop이 넘어오지 않은 경우 (`in` 연산자로 확인) 매핑의 값이 `this.props`에 설정됩니다.
45 +
46 +이 메소드는 인스턴스가 만들어지기 전에 호출되므로 `this.props`에 의존할 수 없습니다. 그리고 `getDefaultProps()`의 리턴값에 포함된 복잡한 객체는 복사되지 않고 인스턴스 간에 공유됩니다.
47 +
48 +
49 +### propTypes
50 +
51 +```javascript
52 +object propTypes
53 +```
54 +
55 +`propTypes` 객체는 컴포넌트에 넘어오는 props가 올바른지 검사할 수 있게 해줍니다. `propTypes`에 대한 자세한 정보는 [재사용 가능한 컴포넌트](/react/docs/reusable-components.ko-KR.html)를 참고하세요.
56 +
57 +
58 +### mixins
59 +
60 +```javascript
61 +array mixins
62 +```
63 +
64 +`mixins` 배열은 여러 컴포넌트 사이에 동작을 공유하는 믹스인을 사용할 수 있게 해줍니다. 믹스인에 대한 자세한 정보는 [재사용 가능한 컴포넌트](/react/docs/reusable-components.ko-KR.html)를 참고하세요.
65 +
66 +
67 +### statics
68 +
69 +```javascript
70 +object statics
71 +```
72 +
73 +`statics` 객체는 컴포넌트 클래스의 스태틱 메소드를 정의할 수 있게 해줍니다. 에를 들어:
74 +
75 +```javascript
76 +var MyComponent = React.createClass({
77 + statics: {
78 + customMethod: function(foo) {
79 + return foo === 'bar';
80 + }
81 + },
82 + render: function() {
83 + }
84 +});
85 +
86 +MyComponent.customMethod('bar'); // true
87 +```
88 +
89 +이 블럭 안에서 정의된 메소드는 인스턴스를 하나도 만들지 않은 시점에도 호출할 수 있고, 컴포넌트의 props나 state에 접근할 수 없습니다. 스태틱 메소드에서 props의 값을 확인하려면 호출자가 스태틱 메소드에 props를 인자로 넘기도록 해야합니다.
90 +
91 +
92 +### displayName
93 +
94 +```javascript
95 +string displayName
96 +```
97 +
98 +`displayName` 문자열은 디버그 메시지에 사용됩니다. JSX는 이 값을 자동으로 설정합니다. [JSX 깊이 알기](/react/docs/jsx-in-depth.html#react-composite-components)를 참고하세요.
99 +
100 +
101 +## 생명주기 메소드
102 +
103 +컴포넌트의 생명주기에서 특정 시점마다 실행되는 메소드들입니다.
104 +
105 +
106 +### 마운트 시: componentWillMount
107 +
108 +```javascript
109 +componentWillMount()
110 +```
111 +
112 +최초 렌더링이 일어나기 직전에 클라이언트 및 서버에서 한번 호출됩니다. 이 메소드 안에서 `setState`를 호출하면, `render()`에서 업데이트된 state를 확인할 수 있고 state가 변함에도 불구하고 `render()`가 한번만 실행됩니다.
113 +
114 +
115 +### 마운트 시: componentDidMount
116 +
117 +```javascript
118 +componentDidMount()
119 +```
120 +
121 +최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출됩니다. (서버에서는 호출되지 않습니다.) 이 시점에 컴포넌트는 `this.getDOMNode()`로 접근 가능한 DOM 표현을 가집니다.
122 +
123 +다른 자바스크립트 프레임워크를 연동하거나, `setTimeout`/`setInterval`로 타이머를 설정하고 AJAX 요청을 보내는 등의 작업을 이 메소드에서 합니다.
124 +
125 +> 주의:
126 +>
127 +> v0.9 이전까지 DOM 노드가 마지막 인자로 넘어왔습니다. 이것을 사용하고 있었다면 이제는 `this.getDOMNode()`로 DOM 노드에 접근할 수 있습니다.
128 +
129 +
130 +### 업데이트 시: componentWillReceiveProps
131 +
132 +```javascript
133 +componentWillReceiveProps(object nextProps)
134 +```
135 +
136 +컴포넌트가 새로운 props를 받을 때 호출됩니다. 이 메소드는 최초 렌더링 시에는 호출되지 않습니다.
137 +
138 +`render()`가 호출되기 전에 prop의 변화를 감지하여 `this.setState()`를 호출해서 state를 업데이트할 수 있습니다. 이전 props는 `this.props`로 접근할 수 있습니다. 이 함수 안에서 `this.setState()`를 호출해도 추가 렌더링이 발생하지 않습니다.
139 +
140 +```javascript
141 +componentWillReceiveProps: function(nextProps) {
142 + this.setState({
143 + likesIncreasing: nextProps.likeCount > this.props.likeCount
144 + });
145 +}
146 +```
147 +
148 +> 주의:
149 +>
150 +> `componentWillReceiveState`에 해당하는 메소드는 없습니다. prop이 변할 때 state가 바뀔 수는 있지만, 그 역은 불가능합니다. state의 변화에 따라 작업을 실행해야 하면 `componentWillUpdate`를 사용하세요.
151 +
152 +
153 +### 업데이트 시: shouldComponentUpdate
154 +
155 +```javascript
156 +boolean shouldComponentUpdate(object nextProps, object nextState)
157 +```
158 +
159 +새로운 props 또는 state를 받아 렌더링을 하기 전에 호출됩니다. 최초 렌더링 시나 `forceUpdate`를 사용하는 경우에는 호출되지 않습니다.
160 +
161 +새로운 props와 state가 컴포넌트 업데이트를 필요로 하지 않는 것이 확실하다면
162 +`false`를 리턴하세요.
163 +
164 +```javascript
165 +shouldComponentUpdate: function(nextProps, nextState) {
166 + return nextProps.id !== this.props.id;
167 +}
168 +```
169 +
170 +`shouldComponentUpdate`가 false를 리턴하면, 다음에 state가 바뀌기 전까지 `render()`가 완전히 호출되지 않고 넘어갑니다. (그리고 `componentWillUpdate`와 `componentDidUpdate` 또한 호출되지 않습니다.)
171 +
172 +기본적으로 `shouldComponentUpdate`는 항상 true를 리턴합니다. `state`가 제자리에서(in place) 바뀐 경우에 발생하는 파악하기 힘든 버그를 막기 위함입니다. 하지만 `state`가 항상 변경 불가능하도록 주의하고 `render()`에서 `props`와 `state`를 읽기만 하면 이전 props 및 state와 바뀌는 값을 비교하는 `shouldComponentUpdate`를 직접 구현할 수 있습니다.
173 +
174 +성능에 병목이 있다면, 특히 컴포넌트가 매우 많은 경우 `shouldComponentUpdate`를 사용하여 앱을 빠르게 만들 수 있습니다.
175 +
176 +
177 +### 업데이트 시: componentWillUpdate
178 +
179 +```javascript
180 +componentWillUpdate(object nextProps, object nextState)
181 +```
182 +
183 +새로운 props나 state를 받았을 때 렌더링 직전에 호출됩니다. 최초 렌더링 시에는 호출되지 않습니다.
184 +
185 +업데이트가 일어나기 전에 준비하기 위해 사용할 수 있습니다.
186 +
187 +> 주의:
188 +>
189 +> 이 메소드에서는 `this.setState()`를 호출할 수 없습니다. prop 변화에 반응하여 state를 업데이트해야 할 경우, `componentWillReceiveProps`를 대신 사용하세요.
190 +
191 +
192 +### 업데이트 시: componentDidUpdate
193 +
194 +```javascript
195 +componentDidUpdate(object prevProps, object prevState)
196 +```
197 +
198 +컴포넌트의 업데이트가 DOM에 반영된 직후에 호출됩니다. 최초 렌더링 시에는 호출되지 않습니다.
199 +
200 +컴포넌트가 업데이트된 뒤 DOM을 조작해야 하는 경우 사용할 수 있습니다.
201 +
202 +> 주의:
203 +>
204 +> v0.9 이전까지 DOM 노드가 마지막 인자로 넘어왔습니다. 이것을 사용하고 있었다면 이제는 `this.getDOMNode()`로 DOM 노드에 접근할 수 있습니다.
205 +
206 +
207 +### 마운트 해제 시: componentWillUnmount
208 +
209 +```javascript
210 +componentWillUnmount()
211 +```
212 +
213 +컴포넌트가 DOM에서 마운트 해제 되기 직전에 호출됩니다.
214 +
215 +이 메소드에서 타이머를 무효화하거나 `componentDidMount`에서 만들어진 DOM 요소를 정리하는 등 필요한 정리 작업을 수행할 수 있습니다.