Translate tip-14 to Korean
- Up to 92c37ff
Jinwoo Oh committed
Mar 15, 2015 at 02:09 UTC
03666e884d440ecd216b9730da044aaf0486b3a8
1 file changed
+41
docs/tips/14-communicate-between-components.ko-KR.md
new
+41
@@ -0,0 +1,41 @@
1
+---
2
+id: communicate-between-components-ko-KR
3
+title: 컴포넌트간의 통신
4
+layout: tips
5
+permalink: communicate-between-components-ko-KR.html
6
+prev: false-in-jsx-ko-KR.html
7
+next: expose-component-functions-ko-KR.html
8
+---
9
+
10
+부모-자식 통신을 위해서는, 간단히 [props를 넘기면 됩니다](/react/docs/multiple-components-ko-KR.html).
11
+
12
+자식-부모 통신을 위해서는:
13
+`GroceryList` 컴포넌트가 배열로 생성된 아이템 목록을 가지고 있다고 해봅시다. 목록의 아이템이 클릭되면 아이템의 이름이 보이길 원할 겁니다:
14
+
15
+```js
16
+var GroceryList = React.createClass({
17
+ handleClick: function(i) {
18
+ console.log('클릭한 아이템: ' + this.props.items[i]);
19
+ },
20
+
21
+ render: function() {
22
+ return (
23
+ <div>
24
+ {this.props.items.map(function(item, i) {
25
+ return (
26
+ <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
27
+ );
28
+ }, this)}
29
+ </div>
30
+ );
31
+ }
32
+});
33
+
34
+React.render(
35
+ <GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode );
36
+```
37
+
38
+`bind(this, arg1, arg2, ...)`의 사용을 확인하세요: 간단히 `handleClick`에 인자를 더 넘겼습니다. 이는 React의 새로운 컨셉이 아닙니다; 그냥 JavaScript죠.
39
+
40
+부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다.
41
+`componentDidMount()`에서 이벤트를 구독하고, `componentWillUnmount()`에서 해제합니다. 이벤트를 받으면 `setState()`를 호출합니다.