Translate tips 01..04 (based on 157d7770c99be26a9e0557d00978f15f6d9db794)
Ted Kim committed
Mar 14, 2015 at 17:25 UTC
aa6bfb6b5164d76b4e0497c0bcc4b7783b2eb38f
4 files changed
+104
docs/tips/01-introduction.ko-KR.md
new
+13
@@ -0,0 +1,13 @@
1
+---
2
+id: introduction-ko-KR
3
+title: 개요
4
+layout: tips
5
+permalink: introduction-ko-KR.html
6
+next: inline-styles-ko-KR.html
7
+---
8
+
9
+React 팁 섹션에서는 여러 궁금증을 해결해주고 흔히 하는 실수를 피할 수 있도록 짧은 정보들을 제공합니다.
10
+
11
+## 기여하기
12
+
13
+[현재 팁](https://github.com/facebook/react/tree/master/docs)의 형식을 따르는 풀 리퀘스트를 [React 저장소](https://github.com/facebook/react)에 보내주세요. PR을 보내기 전에 리뷰가 필요하다면 [freenode의 #reactjs 채널](irc://chat.freenode.net/reactjs)이나 [reactjs Google 그룹](http://groups.google.com/group/reactjs)에서 도움을 요청하실 수 있습니다.
docs/tips/02-inline-styles.ko-KR.md
new
+23
@@ -0,0 +1,23 @@
1
+---
2
+id: inline-styles-ko-KR
3
+title: 인라인 스타일
4
+layout: tips
5
+permalink: inline-styles-ko-KR.html
6
+next: if-else-in-JSX-ko-KR.html
7
+prev: introduction-ko-KR.html
8
+---
9
+
10
+React에서는 인라인 스타일을 문자열로 지정하지 않습니다. 대신 스타일 이름을 camelCased 형식으로 바꾼 키와 스타일의 값(주로 문자열입니다 - [자세히 알아보기](/react/tips/style-props-value-px-ko-KR.html))을 가진 객체로 지정됩니다.
11
+
12
+```js
13
+var divStyle = {
14
+ color: 'white',
15
+ backgroundImage: 'url(' + imgUrl + ')',
16
+ WebkitTransition: 'all', // 'W'가 대문자임에 주의하세요
17
+ msTransition: 'all' // 'ms'는 유일한 소문자 벤더 프리픽스(vendor prefix)입니다
18
+};
19
+
20
+React.render(<div style={divStyle}>Hello World!</div>, mountNode);
21
+```
22
+
23
+스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관성있도록 camelCased 형식입니다. (예를 들어 `node.style.backgroundImage`) [`ms`를 제외한](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) 벤더 프리픽스는 대문자로 시작해야 합니다. 따라서 `WebkitTransition`은 대문자 "W"를 사용합니다.
docs/tips/03-if-else-in-JSX.ko-KR.md
new
+54
@@ -0,0 +1,54 @@
1
+---
2
+id: if-else-in-JSX-ko-KR
3
+title: JSX에서 If-Else
4
+layout: tips
5
+permalink: if-else-in-JSX-ko-KR.html
6
+prev: inline-styles-ko-KR.html
7
+next: self-closing-tag-ko-KR.html
8
+---
9
+
10
+JSX 안에서는 `if-else` 구문이 작동하지 않습니다. 왜냐하면 JSX가 그저 함수 호출과 객체 생성의 편의 문법이기 때문입니다. 다음의 기본적인 예제를 살펴봅시다.
11
+
12
+```js
13
+// 이 JSX 코드는
14
+React.render(<div id="msg">Hello World!</div>, mountNode);
15
+
16
+// 다음의 JS 코드로 변환됩니다.
17
+React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
18
+```
19
+
20
+그렇기 때문에 `if` 구문을 넣을 수 없습니다. 다음 예제를 봅시다.
21
+
22
+```js
23
+// 이 JSX 코드는
24
+<div id={if (condition) { 'msg' }}>Hello World!</div>
25
+
26
+// 다음의 JS 코드로 변환됩니다.
27
+React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
28
+```
29
+
30
+이는 올바른 JS가 아닙니다. 대신 삼항 연산자를 사용할 수 있습니다.
31
+
32
+```js
33
+React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
34
+```
35
+
36
+삼항 연산자가 충분하지 않다면 `if` 문을 사용해 어떤 컴포넌트가 사용될 지 결정할 수 있습니다.
37
+
38
+```js
39
+var loginButton;
40
+if (loggedIn) {
41
+ loginButton = <LogoutButton />;
42
+} else {
43
+ loginButton = <LoginButton />;
44
+}
45
+
46
+return (
47
+ <nav>
48
+ <Home />
49
+ {loginButton}
50
+ </nav>
51
+)
52
+```
53
+
54
+[JSX 컴파일러](/react/jsx-compiler.html)로 지금 바로 사용해보세요.
docs/tips/04-self-closing-tag.ko-KR.md
new
+14
@@ -0,0 +1,14 @@
1
+---
2
+id: self-closing-tag-ko-KR
3
+title: 자기 자신을 닫는 태그
4
+layout: tips
5
+permalink: self-closing-tag-ko-KR.html
6
+prev: if-else-in-JSX-ko-KR.html
7
+next: maximum-number-of-jsx-root-nodes-ko-KR.html
8
+---
9
+
10
+JSX에서 `<MyComponent>`는 유효하지 않고 `<MyComponent />`만 유효합니다. 모든 태그는 닫혀야 합니다. 자기 자신을 닫는 형식을 사용하거나 대응되는 닫는 태그(`</MyComponent>`)가 필요합니다.
11
+
12
+> 주의:
13
+>
14
+> 모든 React 컴포넌트는 자기 자신을 닫을 수 있습니다: `<div />`. `<div></div>`와 동일합니다.