From aa6bfb6b5164d76b4e0497c0bcc4b7783b2eb38f Mon Sep 17 00:00:00 2001
From: Ted Kim <ted@vcnc.co.kr>
Date: Sat, 14 Mar 2015 17:25:27 +0900
Subject: [PATCH] Translate tips 01..04 (based on
 157d7770c99be26a9e0557d00978f15f6d9db794)

---
 docs/tips/01-introduction.ko-KR.md     | 13 +++++++
 docs/tips/02-inline-styles.ko-KR.md    | 23 +++++++++++
 docs/tips/03-if-else-in-JSX.ko-KR.md   | 54 ++++++++++++++++++++++++++
 docs/tips/04-self-closing-tag.ko-KR.md | 14 +++++++
 4 files changed, 104 insertions(+)
 create mode 100644 docs/tips/01-introduction.ko-KR.md
 create mode 100644 docs/tips/02-inline-styles.ko-KR.md
 create mode 100644 docs/tips/03-if-else-in-JSX.ko-KR.md
 create mode 100644 docs/tips/04-self-closing-tag.ko-KR.md

diff --git a/docs/tips/01-introduction.ko-KR.md b/docs/tips/01-introduction.ko-KR.md
new file mode 100644
index 0000000000..e5adf24af5
--- /dev/null
+++ b/docs/tips/01-introduction.ko-KR.md
@@ -0,0 +1,13 @@
+---
+id: introduction-ko-KR
+title: 개요
+layout: tips
+permalink: introduction-ko-KR.html
+next: inline-styles-ko-KR.html
+---
+
+React 팁 섹션에서는 여러 궁금증을 해결해주고 흔히 하는 실수를 피할 수 있도록 짧은 정보들을 제공합니다.
+
+## 기여하기
+
+[현재 팁](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)에서 도움을 요청하실 수 있습니다.
diff --git a/docs/tips/02-inline-styles.ko-KR.md b/docs/tips/02-inline-styles.ko-KR.md
new file mode 100644
index 0000000000..f0d421744a
--- /dev/null
+++ b/docs/tips/02-inline-styles.ko-KR.md
@@ -0,0 +1,23 @@
+---
+id: inline-styles-ko-KR
+title: 인라인 스타일
+layout: tips
+permalink: inline-styles-ko-KR.html
+next: if-else-in-JSX-ko-KR.html
+prev: introduction-ko-KR.html
+---
+
+React에서는 인라인 스타일을 문자열로 지정하지 않습니다. 대신 스타일 이름을 camelCased 형식으로 바꾼 키와 스타일의 값(주로 문자열입니다 - [자세히 알아보기](/react/tips/style-props-value-px-ko-KR.html))을 가진 객체로 지정됩니다.
+
+```js
+var divStyle = {
+  color: 'white',
+  backgroundImage: 'url(' + imgUrl + ')',
+  WebkitTransition: 'all', // 'W'가 대문자임에 주의하세요
+  msTransition: 'all' // 'ms'는 유일한 소문자 벤더 프리픽스(vendor prefix)입니다
+};
+
+React.render(<div style={divStyle}>Hello World!</div>, mountNode);
+```
+
+스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관성있도록 camelCased 형식입니다. (예를 들어 `node.style.backgroundImage`) [`ms`를 제외한](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) 벤더 프리픽스는 대문자로 시작해야 합니다. 따라서 `WebkitTransition`은 대문자 "W"를 사용합니다.
diff --git a/docs/tips/03-if-else-in-JSX.ko-KR.md b/docs/tips/03-if-else-in-JSX.ko-KR.md
new file mode 100644
index 0000000000..1d1bd98b5f
--- /dev/null
+++ b/docs/tips/03-if-else-in-JSX.ko-KR.md
@@ -0,0 +1,54 @@
+---
+id: if-else-in-JSX-ko-KR
+title: JSX에서 If-Else
+layout: tips
+permalink: if-else-in-JSX-ko-KR.html
+prev: inline-styles-ko-KR.html
+next: self-closing-tag-ko-KR.html
+---
+
+JSX 안에서는 `if-else` 구문이 작동하지 않습니다. 왜냐하면 JSX가 그저 함수 호출과 객체 생성의 편의 문법이기 때문입니다. 다음의 기본적인 예제를 살펴봅시다.
+
+```js
+// 이 JSX 코드는
+React.render(<div id="msg">Hello World!</div>, mountNode);
+
+// 다음의 JS 코드로 변환됩니다.
+React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
+```
+
+그렇기 때문에 `if` 구문을 넣을 수 없습니다. 다음 예제를 봅시다.
+
+```js
+// 이 JSX 코드는
+<div id={if (condition) { 'msg' }}>Hello World!</div>
+
+// 다음의 JS 코드로 변환됩니다.
+React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
+```
+
+이는 올바른 JS가 아닙니다. 대신 삼항 연산자를 사용할 수 있습니다.
+
+```js
+React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
+```
+
+삼항 연산자가 충분하지 않다면 `if` 문을 사용해 어떤 컴포넌트가 사용될 지 결정할 수 있습니다.
+
+```js
+var loginButton;
+if (loggedIn) {
+  loginButton = <LogoutButton />;
+} else {
+  loginButton = <LoginButton />;
+}
+
+return (
+  <nav>
+    <Home />
+    {loginButton}
+  </nav>
+)
+```
+
+[JSX 컴파일러](/react/jsx-compiler.html)로 지금 바로 사용해보세요.
diff --git a/docs/tips/04-self-closing-tag.ko-KR.md b/docs/tips/04-self-closing-tag.ko-KR.md
new file mode 100644
index 0000000000..a452959257
--- /dev/null
+++ b/docs/tips/04-self-closing-tag.ko-KR.md
@@ -0,0 +1,14 @@
+---
+id: self-closing-tag-ko-KR
+title: 자기 자신을 닫는 태그
+layout: tips
+permalink: self-closing-tag-ko-KR.html
+prev: if-else-in-JSX-ko-KR.html
+next: maximum-number-of-jsx-root-nodes-ko-KR.html
+---
+
+JSX에서 `<MyComponent>`는 유효하지 않고 `<MyComponent />`만 유효합니다. 모든 태그는 닫혀야 합니다. 자기 자신을 닫는 형식을 사용하거나 대응되는 닫는 태그(`</MyComponent>`)가 필요합니다.
+
+> 주의:
+>
+> 모든 React 컴포넌트는 자기 자신을 닫을 수 있습니다: `<div />`. `<div></div>`와 동일합니다.