Create ref-09-glossary.ko-KR.md
Taeho Kim committed
Feb 1, 2015 at 23:56 UTC
a4f9c67dbb2a3c8160174bf62ab15d57359c1b66
1 file changed
+192
docs/docs/ref-09-glossary.ko-KR.md
new
+192
@@ -0,0 +1,192 @@
1
+---
2
+id: glossary-ko-KR
3
+title: React (가상) DOM 용어
4
+permalink: glossary.ko-KR.html
5
+prev: reconciliation.ko-KR.html
6
+---
7
+
8
+다음은 React에서 사용되는 용어들로, 이 다섯 가지 타입을 구별하는 것은 중요합니다.
9
+
10
+- [ReactElement / ReactElement 팩토리](#react-elements)
11
+- [ReactNode](#react-nodes)
12
+- [ReactComponent / ReactComponent 클래스](#react-components)
13
+
14
+## React 엘리먼트
15
+
16
+`ReactElement`는 React의 주요 타입입니다. `type`, `props`, `key`, `ref`의 네 가지 프로퍼티를 가집니다. 메소드는 가지지 않으며 프로토타입에는 아무 것도 들어있지 않습니다.
17
+
18
+이러한 객체는 `React.createElement`를 통해 만들 수 있습니다.
19
+
20
+```javascript
21
+var root = React.createElement('div');
22
+```
23
+
24
+DOM에 새로운 트리를 렌더링하기 위해서는 `ReactElement`를 만들고 일반적인 DOM `Element` (`HTMLElement` 또는 `SVGElement`)와 함께 `React.render`에 넘깁니다. `ReactElement`를 DOM `Element`와 혼동해서는 안됩니다. `ReactElement`는 가볍고, 상태를 갖지 않으며, 변경 불가능한, DOM `Element`의 가상 표현입니다. 즉 가상 DOM입니다.
25
+
26
+```javascript
27
+React.render(root, document.body);
28
+```
29
+
30
+DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로퍼티 객체를, 세번째 인자로 자식을 넘깁니다.
31
+
32
+```javascript
33
+var child = React.createElement('li', null, 'Text Content');
34
+var root = React.createElement('ul', { className: 'my-list' }, child);
35
+React.render(root, document.body);
36
+```
37
+
38
+React JSX를 사용하면 `ReactElement`가 알아서 만들어집니다. 따라서 다음 코드는 앞의 코드와 같습니다:
39
+
40
+```javascript
41
+var root = <ul className="my-list">
42
+ <li>Text Content</li>
43
+ </ul>;
44
+React.render(root, document.body);
45
+```
46
+
47
+__팩토리__
48
+
49
+`ReactElement` 팩토리는 그저 특정한 `type` 프로퍼티를 가지는 `ReactElement`를 만들어주는 함수입니다. React에는 팩토리를 만드는 헬퍼가 내장되어 있습니다. 그 함수는 사실상 다음과 같습니다:
50
+
51
+```javascript
52
+function createFactory(type){
53
+ return React.createElement.bind(null, type);
54
+}
55
+```
56
+
57
+이를 이용하면 편리한 단축 함수를 만들 수 있어 항상 `React.createElement('div')`를 입력하지 않아도 됩니다.
58
+
59
+```javascript
60
+var div = React.createFactory('div');
61
+var root = div({ className: 'my-div' });
62
+React.render(root, document.body);
63
+```
64
+
65
+React에는 이미 보통 HTML 태그를 위한 팩토리가 내장되어 있습니다:
66
+
67
+```javascript
68
+var root = React.DOM.ul({ className: 'my-list' },
69
+ React.DOM.li(null, 'Text Content')
70
+ );
71
+```
72
+
73
+JSX를 사용하면 팩토리가 필요하지 않습니다. 이미 JSX가 `ReactElement`를 만드는 편리한 단축 문법을 제공합니다.
74
+
75
+
76
+## React 노드
77
+
78
+`ReactNode`는 다음 중 하나가 될 수 있습니다:
79
+- `ReactElement`
80
+- `string` (`ReactText`로 부르기도 함)
81
+- `number` (`ReactText`로 부르기도 함)
82
+- `ReactNode`의 배열 (`ReactFragment`로 부르기도 함)
83
+
84
+이들은 자식을 표현하기 위해 다른 `ReactElement`의 프로퍼티에 사용됩니다. 사실상 이들이 `ReactElement`의 트리를 형성합니다.
85
+
86
+
87
+## React 컴포넌트
88
+
89
+`ReactElement`만 가지고도 React를 사용할 수는 있지만, React의 장점을 제대로 활용하려면 `ReactComponent`를 사용하여 상태를 가진 캡슐화된 객체를 만들기를 원할 것입니다.
90
+
91
+`ReactComponent` 클래스는 그냥 JavaScript 클래스 (또는 "생성자 함수")입니다.
92
+
93
+```javascript
94
+var MyComponent = React.createClass({
95
+ render: function() {
96
+ ...
97
+ }
98
+});
99
+```
100
+
101
+이 생성자가 호출될 때 최소한 `render` 메소드를 가진 객체를 리턴해야 합니다. 이 리턴된 객체를 `ReactComponent`라고 부릅니다.
102
+
103
+```javascript
104
+var component = new MyComponent(props); // 절대 하지 마세요.
105
+```
106
+
107
+테스트 목적이 아니라면 __절대__ 이 생성자를 직접 호출하지 마십시오. React가 알아서 호출해줍니다.
108
+
109
+대신 `ReactComponent` 클래스를 `createElement`에 넘겨 `ReactElement`를 받을 수 있습니다.
110
+
111
+```javascript
112
+var element = React.createElement(MyComponent);
113
+```
114
+
115
+또는 JSX를 사용하면:
116
+
117
+```javascript
118
+var element = <MyComponent />;
119
+```
120
+
121
+이것이 `React.render`에 넘겨지면 React가 알아서 생성자를 호출하여 `ReactComponent`를 만들고 리턴합니다.
122
+
123
+```javascript
124
+var component = React.render(element, document.body);
125
+```
126
+
127
+같은 타입의 `ReactElement`와 같은 컨테이너 DOM `Element`를 가지고 `React.render`를 계속 호출하면 항상 같은 인스턴스를 리턴합니다. 이 인스턴스는 상태를 가집니다.
128
+
129
+```javascript
130
+var componentA = React.render(<MyComponent />, document.body);
131
+var componentB = React.render(<MyComponent />, document.body);
132
+componentA === componentB; // true
133
+```
134
+
135
+그렇기 때문에 직접 인스턴스를 만들어서는 안됩니다. `ReactComponent`가 생성되기 전에 `ReactElement`가 대신 가상의 `ReactComponent` 역할을 합니다. 이전 `ReactElement`와 새 `ReactElement`를 비교하여 새로운 `ReactComponent`를 만들지, 아니면 기존 것을 재사용할지 결정합니다.
136
+
137
+`ReactComponent`의 `render` 메소드는 또다른 `ReactElement`를 리턴해야 합니다. 이렇게 해서 컴포넌트들이 조합됩니다. 결과적으로 렌더링 과정은 다음과 같습니다. `string` 타입의 태그를 가진 `ReactElement`를 통해 DOM `Element` 인스턴스가 생성되며 문서에 삽입됩니다.
138
+
139
+
140
+## 형식 타입 정의
141
+
142
+__진입점__
143
+
144
+```
145
+React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;
146
+```
147
+
148
+__노드와 엘리먼트__
149
+
150
+```
151
+type ReactNode = ReactElement | ReactFragment | ReactText;
152
+
153
+type ReactElement = ReactComponentElement | ReactDOMElement;
154
+
155
+type ReactDOMElement = {
156
+ type : string,
157
+ props : {
158
+ children : ReactNodeList,
159
+ className : string,
160
+ etc.
161
+ },
162
+ key : string | boolean | number | null,
163
+ ref : string | null
164
+};
165
+
166
+type ReactComponentElement<TProps> = {
167
+ type : ReactClass<TProps>,
168
+ props : TProps,
169
+ key : string | boolean | number | null,
170
+ ref : string | null
171
+};
172
+
173
+type ReactFragment = Array<ReactNode | ReactEmpty>;
174
+
175
+type ReactNodeList = ReactNode | ReactEmpty;
176
+
177
+type ReactText = string | number;
178
+
179
+type ReactEmpty = null | undefined | boolean;
180
+```
181
+
182
+__클래스와 컴포넌트__
183
+
184
+```
185
+type ReactClass<TProps> = (TProps) => ReactComponent<TProps>;
186
+
187
+type ReactComponent<TProps> = {
188
+ props : TProps,
189
+ render : () => ReactElement
190
+};
191
+```
192
+