{"commit":{"authorName":"Shim Won","shortRevision":"aae74da792","revision":"aae74da7920875b9cfa35c9f5d1516fd4288d111","authoredAt":"2015-02-10T19:54:11+09:00","subject":"Translate 02.1 to Korean","authorEmail":"marocchino@gmail.com"},"body":"- Up to 513433b","files":[{"status":"A","path":"docs\/docs\/02.1-jsx-in-depth.ko-KR.md"}],"patch":"diff --git a\/docs\/docs\/02.1-jsx-in-depth.ko-KR.md b\/docs\/docs\/02.1-jsx-in-depth.ko-KR.md\nnew file mode 100644\nindex 0000000000..ddd6080cc5\n--- \/dev\/null\n+++ b\/docs\/docs\/02.1-jsx-in-depth.ko-KR.md\n@@ -0,0 +1,203 @@\n+---\n+id: jsx-in-depth-ko-KR\n+title: JSX 깊이보기\n+permalink: jsx-in-depth.ko-KR.html\n+prev: displaying-data.ko-KR.html\n+next: jsx-spread.ko-KR.html\n+---\n+\n+[JSX](http:\/\/facebook.github.io\/jsx\/)는 XML과 비슷한 JavaScript문법 확장입니다. React에서 변환되는 간단한 JSX 구문을 사용하실 수 있습니다.\n+\n+## 왜 JSX인가?\n+\n+React를 위해 꼭 JSX를 사용할 필요는 없고, 그냥 일반 JS를 사용할 수도 있습니만 JSX를 사용하기를 추천합니다. 왜냐하면, 어트리뷰트를 가진 트리 구조로 정의할 수 있는 간결하고 익숙한 문법이기 때문입니다.\n+\n+이것은 디자이너 같은 케쥬얼 개발자에게 더 익숙합니다.\n+\n+XML에는 여닫는 태그의 장점이 있습니다. 태그는 큰 트리일 때 함수 호출이나 객체 리터럴보다 읽기 쉬워 집니다.\n+\n+JSX는 JavaScript의 시맨틱을 변경하지 않습니다.\n+\n+## HTML 태그 vs. React 컴포넌트\n+\n+React는 렌더 HTML 태그(문자열)이나 React 컴포넌트(클래스)일 수 있습니다.\n+\n+HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세요.\n+\n+```javascript\n+var myDivElement =

;\n+React.render(myDivElement, document.body);\n+```\n+\n+React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.\n+\n+```javascript\n+var MyComponent = React.createClass({\/*...*\/});\n+var myElement = ;\n+React.render(myElement, document.body);\n+```\n+\n+React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.\n+\n+> 주의:\n+>\n+> JSX가 JavaScript기 때문에, `class`, `for`같은 식별자는 XML 어트리뷰트 이름으로\n+> 권장하지 않습니다. 대신, React DOM 컴포넌트는 각각 `className`, `htmlFor`같은\n+> DOM 프로퍼티 이름을 기대합니다.\n+\n+## 변환\n+\n+React JSX는 XML같은 문법에서 네이티브 JavaScript로 변환됩니다. XML 엘리먼트, 어트리뷰트, 자식은 `React.createElement`에 넘겨지는 인자로 변환됩니다.\n+\n+```javascript\n+var Nav;\n+\/\/ 입력 (JSX):\n+var app =

;\n+\/\/ 출력 (JS):\n+var app = React.createElement(Nav, {color:\"blue\"});\n+```\n+\n+`

`를 사용하려면, `Nav`변수는 스코프에 있어야 합니다.\n+\n+JSX에서는 XML 구문으로 자식을 지정할 수도 있습니다.\n+\n+```javascript\n+var Nav, Profile;\n+\/\/ 입력 (JSX):\n+var app =

click<\/Profile><\/Nav>;\n+\/\/ 출력 (JS):\n+var app = React.createElement(\n+ Nav,\n+ {color:\"blue\"},\n+ React.createElement(Profile, null, \"click\")\n+);\n+```\n+\n+[JSX 컴파일러](\/react\/jsx-compiler.html)를 사용해보면 JSX에서 어떻게 네이티브\n+JavaScript로 변환하는지(desugars) 볼 수 있고,\n+[HTML에서 JSX 변환기](\/react\/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해\n+줍니다.\n+\n+JSX를 사용 하시려면, [시작하기](\/react\/docs\/getting-started.html) 가이드에서 어떻게 컴파일을 설정하는지 보실 수 있습니다.\n+\n+> 주의:\n+>\n+> JSX 표현식은 언제나 ReactElement로 평가됩니다. 실제 구현의 세부사항은 많이\n+> 다를 수 있습니다. 최적화 모드는ReactElement를 `React.createElement`에서 검증\n+> 코드를 우회하는 객체 리터럴로 ReactElement를 인라인으로 만들 수 있습니다.\n+\n+## 네임스페이스를 사용한 컴포넌트\n+\n+자식을 많이 가지는 컴포넌트를 만들거나, 재사용 가능한 컴포넌트 카테고리(`Form` 카테고리처럼)가 있는 애플리케이션을 만든다면, 간단하고 쉽게 하기 위해, *컴포넌트에서 네임스페이스*를 사용할 수 있습니다. 예를 들어, 이렇게 해야 할 일이 있다면\n+\n+```javascript\n+var Form = MyFormComponent;\n+var FormRow = Form.Row;\n+var FormLabel = Form.Label;\n+var FormInput = Form.Input;\n+\n+var App = (\n+

\n+ \n+ \n+ \n+ <\/FormRow>\n+ <\/Form>\n+);\n+```\n+\n+위에 변수를 한 묶음 선언하는 대신에, 다른 컴포넌트를 어트리뷰트로 가지는 하나의 컴포넌트만 쓸 수 있습니다.\n+\n+```javascript\n+var Form = MyFormComponent;\n+\n+var App = (\n+ \n+ \n+ \n+ \n+ <\/Form.Row>\n+ <\/Form>\n+);\n+```\n+\n+이렇게 하려면, *\"sub-components\"*를 메인 컴포넌트의 어트리뷰트로 만들 필요가 있습니다.\n+\n+```javascript\n+var MyFormComponent = React.createClass({ ... });\n+\n+MyFormComponent.Row = React.createClass({ ... });\n+MyFormComponent.Label = React.createClass({ ... });\n+MyFormComponent.Input = React.createClass({ ... });\n+```\n+\n+코드를 컴파일할 때 JSX는 이것을 제대로 처리해 줍니다.\n+\n+```javascript\n+var App = (\n+ React.createElement(Form, null, \n+ React.createElement(Form.Row, null, \n+ React.createElement(Form.Label, null), \n+ React.createElement(Form.Input, null)\n+ )\n+ )\n+);\n+```\n+\n+> 주의:\n+>\n+> 이 기능은 [v0.11](http:\/\/facebook.github.io\/react\/blog\/2014\/07\/17\/react-v0.11.html#jsx) 이상에만 있습니다.\n+\n+## JavaScript 표현식\n+\n+### 어트리뷰트 표현식\n+\n+JavaScript 표현식을 어트리뷰트 값으로 사용하려면, 표현식을 쌍따옴표(`\"\"`)대신\n+중괄호(`{}`)로 감싸야 합니다.\n+\n+```javascript\n+\/\/ 입력 (JSX):\n+var person = ;\n+\/\/ 출력 (JS):\n+var person = React.createElement(\n+ Person,\n+ {name: window.isLoggedIn ? window.name : ''}\n+);\n+```\n+\n+### 자식 표현식\n+\n+비슷하게, JavaScript 표현식은 자식을 표현하는 데 사용할 수 있습니다.\n+\n+```javascript\n+\/\/ 입력 (JSX):\n+var content = {window.isLoggedIn ?

: }<\/Container>;\n+\/\/ 출력 (JS):\n+var content = React.createElement(\n+ Container,\n+ null,\n+ window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)\n+);\n+```\n+\n+### 주석\n+\n+JSX에 주석을 넣기는 쉽습니다. 그냥 JS 표현식과 같습니다. 그냥 태그의 자식 섹션에서만 조심하시면 됩니다. 이럴 땐 주석 주변에 `{}`를 감싸야 합니다.\n+\n+```javascript\n+var content = (\n+

dillon1000/react

Files changed