Translate 10.3 to Korean
- Up to 5ab7fde
Shim Won committed
Mar 1, 2015 at 22:29 UTC
c24e5926b9aeddec0860b577b515e51e466949c8
1 file changed
+62
docs/docs/10.3-class-name-manipulation.ko-KR.md
new
+62
@@ -0,0 +1,62 @@
1
+---
2
+id: class-name-manipulation-ko-KR
3
+title: 클래스 이름 조작
4
+permalink: class-name-manipulation-ko-KR.html
5
+prev: two-way-binding-helpers-ko-KR.html
6
+next: test-utils-ko-KR.html
7
+---
8
+
9
+> 주의:
10
+>
11
+> 이 모듈은 이제 [JedWatson/classnames](https://github.com/JedWatson/classnames)에 독립적으로 있고 React와 관련없습니다. 그러므로 이 에드온은 제거될 예정입니다.
12
+
13
+`classSet()`은 간단히 DOM `class` 문자열을 조작하는 편리한 도구입니다.
14
+
15
+일반적으로 있을법한 경우와 `classSet()`을 사용하지 않았을 때의 처리법을 보시죠.
16
+
17
+```javascript
18
+// 어떤 `<Message />` React 컴포넌트의 안쪽
19
+render: function() {
20
+ var classString = 'message';
21
+ if (this.props.isImportant) {
22
+ classString += ' message-important';
23
+ }
24
+ if (this.props.isRead) {
25
+ classString += ' message-read';
26
+ }
27
+ // 'message message-important message-read'
28
+ return <div className={classString}>Great, I'll be there.</div>;
29
+}
30
+```
31
+
32
+이것은 순식간에 장황해질 수 있습니다. 클래스 이름 문자열은 읽기 어렵고 에러가 발생하기 쉽기도 하죠. `classSet()`가 이 문제를 해결할 수 있습니다.
33
+
34
+```javascript
35
+render: function() {
36
+ var cx = React.addons.classSet;
37
+ var classes = cx({
38
+ 'message': true,
39
+ 'message-important': this.props.isImportant,
40
+ 'message-read': this.props.isRead
41
+ });
42
+ // 최종 문자열은 동일하지만, 훨씬 깔끔함
43
+ return <div className={classes}>Great, I'll be there.</div>;
44
+}
45
+```
46
+
47
+`classSet()`을 사용할 때 사용할지 안할지 잘모르는 CSS 클래스 이름 키와 함께 객체를 전달합니다. true로 간주되는(Truthy) 값은 키를 결과 문자열의 일부로 만듭니다.
48
+
49
+`classSet()`은 클래스 이름을 인자로 넘겨 연결되게 할 수도 있습니다.
50
+
51
+```javascript
52
+render: function() {
53
+ var cx = React.addons.classSet;
54
+ var importantModifier = 'message-important';
55
+ var readModifier = 'message-read';
56
+ var classes = cx('message', importantModifier, readModifier);
57
+ // 최종 문자열은 'message message-important message-read'
58
+ return <div className={classes}>Great, I'll be there.</div>;
59
+}
60
+```
61
+
62
+복잡한 문자열 연결은 이제 안하셔도 됩니다!