Translate 10.2 to Korean
- Up to b7a548c
Shim Won committed
Mar 1, 2015 at 23:12 UTC
bf6d9811e72b5a5d96f2c78d9e35da4543e3d24e
1 file changed
+114
docs/docs/10.2-form-input-binding-sugar.ko-KR.md
new
+114
@@ -0,0 +1,114 @@
1
+---
2
+id: two-way-binding-helpers-ko-KR
3
+title: 양방향 바인딩 핼퍼
4
+permalink: two-way-binding-helpers-ko-KR.html
5
+prev: animation-ko-KR.html
6
+next: class-name-manipulation-ko-KR.html
7
+---
8
+
9
+`ReactLink`는 React에서 양방향 바인딩을 표현하는 쉬운 방법입니다.
10
+
11
+> 주의:
12
+>
13
+> 프레임워크를 새로 접하신다면, 대부분의 애플리케이션에서 `ReactLink`는 필요없고 신중히 사용하셔야 함을 알려드립니다.
14
+
15
+React에서 데이터 흐름은 소유주에서 자식으로의 단방향입니다. 이는 [폰 노이만 컴퓨팅 모델](http://ko.wikipedia.org/wiki/%ED%8F%B0_%EB%85%B8%EC%9D%B4%EB%A7%8C_%EA%B5%AC%EC%A1%B0)의 데이터가 단방향으로 흐르기 때문입니다. 이것을 "단방향 데이터 바인딩"으로 생각하셔도 됩니다.
16
+
17
+하지만 많은 애플리케이션에서 데이터를 요청해서 프로그램으로 돌려줍니다. 예를 들어, 폼을 개발한다면, 사용자 입력을 받았을 때 `state`를 바꾸거나, JavaScript안에서 레이아웃을 바꾸고 그에 따라 어떤 DOM 엘리먼트의 크기를 바꾸게 하고 싶을 수도 있습니다.
18
+
19
+React에서 이는 "change" 이벤트를 감시하고 데이터 소스(보통 DOM)에서 읽어 컴포넌트에서 `setState()`를 호출하는 식으로 할 수 있습니다. "데이터 흐름 반복을 제한"하면 더 이해하기 편하고, 쉽게 유지보수할 수 있는 프로그램이 만들어지는 것은 명확합니다. 더 자세한 내용은 [폼 문서](/react/docs/forms-ko-KR.html)를 확인하세요.
20
+
21
+양방향 바인딩(묵시적으로 DOM의 어떤 값은 React `state`와 일치하도록 강제하는 것)은 간결하기도 하고 다양한 애플리케이션을 지원 할 수 있습니다. React는 `ReactLink`를 제공합니다. 이는 위에서 설명한 일반적인 데이터 흐름 반복 패턴을 설정하거나, 어떤 데이터 소스를 React `state`로 "링크하는" 편의 문법입니다.
22
+
23
+> 주의:
24
+>
25
+> ReactLink는 얇은 레퍼고 `onChange`/`setState()`패턴 부분의 관례일 뿐입니다. React 애플리케이션에서의 데이터 흐름을 근본적으로 바꾸지는 않습니다.
26
+
27
+## ReactLink: 적용 전후
28
+
29
+`ReactLink`를 사용하지 않는 간단한 폼 예제입니다.
30
+
31
+```javascript
32
+var NoLink = React.createClass({
33
+ getInitialState: function() {
34
+ return {message: 'Hello!'};
35
+ },
36
+ handleChange: function(event) {
37
+ this.setState({message: event.target.value});
38
+ },
39
+ render: function() {
40
+ var message = this.state.message;
41
+ return <input type="text" value={message} onChange={this.handleChange} />;
42
+ }
43
+});
44
+```
45
+
46
+이것은 정말 잘 동작하고, 데이터가 어떻게 흐르는지 매우 명확하게 보여지지만, 폼필드가 많을 경우 약간 장황해 질 수 있습니다. 타이핑을 줄이기 위해 `ReactLink`를 사용해 보겠습니다.
47
+
48
+```javascript{2,7}
49
+var WithLink = React.createClass({
50
+ mixins: [React.addons.LinkedStateMixin],
51
+ getInitialState: function() {
52
+ return {message: 'Hello!'};
53
+ },
54
+ render: function() {
55
+ return <input type="text" valueLink={this.linkState('message')} />;
56
+ }
57
+});
58
+```
59
+
60
+`LinkedStateMixin`는 React 컴포넌트에 `linkState()`라는 메서드를 추가합니다. `linkState()`는 React state의 현재 값과 그것을 변경할 때의 콜백을 가지는 `ReactLink` 객체를 리턴합니다.
61
+
62
+`ReactLink` 객체는 props로 트리의 위나 아래로 넘길 수 있어서, 쉽고 명확하게 계층구조에서 깊이 있는 컴포넌트와 높이 있는 state 사이의 양방향 바인딩을 설정할 수 있습니다.
63
+
64
+checkbox의 `value` 어트리뷰트는 다른 것과 다르게 checkbox가 체크되었을 때 폼 submit에 값이 전달되는 것에 주의하세요.(기본값 `on`) 그래서 `value` 어트리뷰트는 checkbox가 체크되거나 해제될 때 업데이트되지 않습니다. checkbox에서는 `valueLink`대신 `checkedLink`를 사용하셔야 합니다.
65
+```
66
+<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
67
+```
68
+
69
+
70
+## 내부 구조
71
+
72
+`ReactLink`에는 크게 인스턴스를 생성하는 면과 사용하는 면이 있습니다. `ReactLink`가 얼마나 간단한지 확인하기위해, 이 부분들을 보다 명시적으로 고쳐 봅시다.
73
+
74
+### LinkedStateMixin 없이 ReactLink 쓰기
75
+
76
+```javascript{5-7,9-12}
77
+var WithoutMixin = React.createClass({
78
+ getInitialState: function() {
79
+ return {message: 'Hello!'};
80
+ },
81
+ handleChange: function(newValue) {
82
+ this.setState({message: newValue});
83
+ },
84
+ render: function() {
85
+ var valueLink = {
86
+ value: this.state.message,
87
+ requestChange: this.handleChange
88
+ };
89
+ return <input type="text" valueLink={valueLink} />;
90
+ }
91
+});
92
+```
93
+
94
+보시다시피, `ReactLink` 객체는 `value`와 `requestChange` prop만 가지는 매우 간단한 객체입니다. `LinkedStateMixin`도 간단합니다. 그냥 `this.state`의 값과 `this.setState()`에서 호출되는 콜백을 필드로 가질 뿐입니다.
95
+
96
+### valueLink 없이 ReactLink 쓰기
97
+
98
+```javascript
99
+var WithoutLink = React.createClass({
100
+ mixins: [React.addons.LinkedStateMixin],
101
+ getInitialState: function() {
102
+ return {message: 'Hello!'};
103
+ },
104
+ render: function() {
105
+ var valueLink = this.linkState('message');
106
+ var handleChange = function(e) {
107
+ valueLink.requestChange(e.target.value);
108
+ };
109
+ return <input type="text" value={valueLink.value} onChange={handleChange} />;
110
+ }
111
+});
112
+```
113
+
114
+`valueLink` prop도 간단합니다. 단순히 `onChange` 이벤트를 처리하고 `this.props.valueLink.requestChange()`를 호출하고 `this.props.value`대신 `this.props.valueLink.value`를 사용합니다. 그게 다에요!