Translate 02.2 to Korean
- Up to fc91d2f
Shim Won committed
Feb 14, 2015 at 14:57 UTC
a04597eaa10ecbfdd8ec8ee0885721ff534cc6eb
1 file changed
+56
docs/docs/02.2-jsx-spread.ko-KR.md
new
+56
@@ -0,0 +1,56 @@
1
+---
2
+id: jsx-spread-ko-KR
3
+title: JSX 스프레드 어트리뷰트
4
+permalink: jsx-spread-ko-KR.html
5
+prev: jsx-in-depth-ko-KR.html
6
+next: jsx-gotchas-ko-KR.html
7
+---
8
+
9
+미리 컴포넌트에 넣을 모든 프로퍼티를 알게 된다면, JSX를 사용하기 쉬워집니다.
10
+
11
+```javascript
12
+ var component = <Component foo={x} bar={y} />;
13
+```
14
+
15
+## Props의 변경은 나빠요.[^1]
16
+
17
+하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다.
18
+
19
+```javascript
20
+ var component = <Component />;
21
+ component.props.foo = x; // 나쁨
22
+ component.props.bar = y; // 역시 나쁨
23
+```
24
+
25
+이것은 안티 패턴입니다. 왜냐하면 한참 뒤까지 정확한 propTypes을 체크할 수 없다는 뜻이기 때문입니다. 이것은 propTypes 에러는 알기 힘든 스택 트레이스로 끝난다는 의미입니다.
26
+
27
+이 시점에서 props는 불변성인 것을 고려해야 합니다. props 객체를 변경하는 것은 다른 곳에서 예기치 못한 결과가 생길 수 있기 때문에 이상적으로는 이 시점에서 frozen 객체가 되어야 합니다.
28
+
29
+## 스프레드 어트리뷰트
30
+
31
+이제 JSX 새로운 기능 스프레드 어트리뷰트를 사용하실 수 있습니다.
32
+
33
+```javascript
34
+ var props = {};
35
+ props.foo = x;
36
+ props.bar = y;
37
+ var component = <Component {...props} />;
38
+```
39
+
40
+전달한 객체의 프로퍼티가 컴포넌트의 props에 복사됩니다.
41
+
42
+이 것은 여러 번 사용하거나 다른 어트리뷰트와 조합해서 사용할 수 있습니다. 명세 순서는 중요합니다. 나중의 어트리뷰트가 이전 것보다 우선되기 때문입니다.
43
+
44
+```javascript
45
+ var props = { foo: 'default' };
46
+ var component = <Component {...props} foo={'override'} />;
47
+ console.log(component.props.foo); // 'override'
48
+```
49
+
50
+## 이상한 `...` 표기법은 무엇인가요?
51
+
52
+`...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다.
53
+
54
+[^1]: 아무래도 좋지만, 이 제목의 원문 "Mutating Props is Bad, mkay"는 사우스 파크에
55
+ 나온 대사 "[Drug is bad, mkay](https://www.youtube.com/watch?v=Uh7l8dx-h8M)"의
56
+ 패러디입니다.