{"patch":"diff --git a\/docs\/docs\/ref-09-glossary.ko-KR.md b\/docs\/docs\/ref-09-glossary.ko-KR.md\nnew file mode 100644\nindex 0000000000..6068176bee\n--- \/dev\/null\n+++ b\/docs\/docs\/ref-09-glossary.ko-KR.md\n@@ -0,0 +1,192 @@\n+---\n+id: glossary-ko-KR\n+title: React (가상) DOM 용어\n+permalink: glossary.ko-KR.html\n+prev: reconciliation.ko-KR.html\n+---\n+\n+다음은 React에서 사용되는 용어들로, 이 다섯 가지 타입을 구별하는 것은 중요합니다.\n+\n+- [ReactElement \/ ReactElement 팩토리](#react-elements)\n+- [ReactNode](#react-nodes)\n+- [ReactComponent \/ ReactComponent 클래스](#react-components)\n+\n+## React 엘리먼트\n+\n+`ReactElement`는 React의 주요 타입입니다. `type`, `props`, `key`, `ref`의 네 가지 프로퍼티를 가집니다. 메소드는 가지지 않으며 프로토타입에는 아무 것도 들어있지 않습니다.\n+\n+이러한 객체는 `React.createElement`를 통해 만들 수 있습니다.\n+\n+```javascript\n+var root = React.createElement('div');\n+```\n+\n+DOM에 새로운 트리를 렌더링하기 위해서는 `ReactElement`를 만들고 일반적인 DOM `Element` (`HTMLElement` 또는 `SVGElement`)와 함께 `React.render`에 넘깁니다. `ReactElement`를 DOM `Element`와 혼동해서는 안됩니다. `ReactElement`는 가볍고, 상태를 갖지 않으며, 변경 불가능한, DOM `Element`의 가상 표현입니다. 즉 가상 DOM입니다.\n+\n+```javascript\n+React.render(root, document.body);\n+```\n+\n+DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로퍼티 객체를, 세번째 인자로 자식을 넘깁니다.\n+\n+```javascript\n+var child = React.createElement('li', null, 'Text Content');\n+var root = React.createElement('ul', { className: 'my-list' }, child);\n+React.render(root, document.body);\n+```\n+\n+React JSX를 사용하면 `ReactElement`가 알아서 만들어집니다. 따라서 다음 코드는 앞의 코드와 같습니다:\n+\n+```javascript\n+var root =

Text Content<\/li>\n+ <\/ul>;\n+React.render(root, document.body);\n+```\n+\n+__팩토리__\n+\n+`ReactElement` 팩토리는 그저 특정한 `type` 프로퍼티를 가지는 `ReactElement`를 만들어주는 함수입니다. React에는 팩토리를 만드는 헬퍼가 내장되어 있습니다. 그 함수는 사실상 다음과 같습니다:\n+\n+```javascript\n+function createFactory(type){\n+ return React.createElement.bind(null, type);\n+}\n+```\n+\n+이를 이용하면 편리한 단축 함수를 만들 수 있어 항상 `React.createElement('div')`를 입력하지 않아도 됩니다.\n+\n+```javascript\n+var div = React.createFactory('div');\n+var root = div({ className: 'my-div' });\n+React.render(root, document.body);\n+```\n+\n+React에는 이미 보통 HTML 태그를 위한 팩토리가 내장되어 있습니다:\n+\n+```javascript\n+var root = React.DOM.ul({ className: 'my-list' },\n+ React.DOM.li(null, 'Text Content')\n+ );\n+```\n+\n+JSX를 사용하면 팩토리가 필요하지 않습니다. 이미 JSX가 `ReactElement`를 만드는 편리한 단축 문법을 제공합니다.\n+\n+\n+## React 노드\n+\n+`ReactNode`는 다음 중 하나가 될 수 있습니다:\n+- `ReactElement`\n+- `string` (`ReactText`로 부르기도 함)\n+- `number` (`ReactText`로 부르기도 함)\n+- `ReactNode`의 배열 (`ReactFragment`로 부르기도 함)\n+\n+이들은 자식을 표현하기 위해 다른 `ReactElement`의 프로퍼티에 사용됩니다. 사실상 이들이 `ReactElement`의 트리를 형성합니다.\n+\n+\n+## React 컴포넌트\n+\n+`ReactElement`만 가지고도 React를 사용할 수는 있지만, React의 장점을 제대로 활용하려면 `ReactComponent`를 사용하여 상태를 가진 캡슐화된 객체를 만들기를 원할 것입니다.\n+\n+`ReactComponent` 클래스는 그냥 JavaScript 클래스 (또는 \"생성자 함수\")입니다.\n+\n+```javascript\n+var MyComponent = React.createClass({\n+ render: function() {\n+ ...\n+ }\n+});\n+```\n+\n+이 생성자가 호출될 때 최소한 `render` 메소드를 가진 객체를 리턴해야 합니다. 이 리턴된 객체를 `ReactComponent`라고 부릅니다.\n+\n+```javascript\n+var component = new MyComponent(props); \/\/ 절대 하지 마세요.\n+```\n+\n+테스트 목적이 아니라면 __절대__ 이 생성자를 직접 호출하지 마십시오. React가 알아서 호출해줍니다.\n+\n+대신 `ReactComponent` 클래스를 `createElement`에 넘겨 `ReactElement`를 받을 수 있습니다.\n+\n+```javascript\n+var element = React.createElement(MyComponent);\n+```\n+\n+또는 JSX를 사용하면:\n+\n+```javascript\n+var element = ;\n+```\n+\n+이것이 `React.render`에 넘겨지면 React가 알아서 생성자를 호출하여 `ReactComponent`를 만들고 리턴합니다.\n+\n+```javascript\n+var component = React.render(element, document.body);\n+```\n+\n+같은 타입의 `ReactElement`와 같은 컨테이너 DOM `Element`를 가지고 `React.render`를 계속 호출하면 항상 같은 인스턴스를 리턴합니다. 이 인스턴스는 상태를 가집니다.\n+\n+```javascript\n+var componentA = React.render(, document.body);\n+var componentB = React.render(, document.body);\n+componentA === componentB; \/\/ true\n+```\n+\n+그렇기 때문에 직접 인스턴스를 만들어서는 안됩니다. `ReactComponent`가 생성되기 전에 `ReactElement`가 대신 가상의 `ReactComponent` 역할을 합니다. 이전 `ReactElement`와 새 `ReactElement`를 비교하여 새로운 `ReactComponent`를 만들지, 아니면 기존 것을 재사용할지 결정합니다.\n+\n+`ReactComponent`의 `render` 메소드는 또다른 `ReactElement`를 리턴해야 합니다. 이렇게 해서 컴포넌트들이 조합됩니다. 결과적으로 렌더링 과정은 다음과 같습니다. `string` 타입의 태그를 가진 `ReactElement`를 통해 DOM `Element` 인스턴스가 생성되며 문서에 삽입됩니다.\n+\n+\n+## 형식 타입 정의\n+\n+__진입점__\n+\n+```\n+React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;\n+```\n+\n+__노드와 엘리먼트__\n+\n+```\n+type ReactNode = ReactElement | ReactFragment | ReactText;\n+\n+type ReactElement = ReactComponentElement | ReactDOMElement;\n+\n+type ReactDOMElement = {\n+ type : string,\n+ props : {\n+ children : ReactNodeList,\n+ className : string,\n+ etc.\n+ },\n+ key : string | boolean | number | null,\n+ ref : string | null\n+};\n+\n+type ReactComponentElement = {\n+ type : ReactClass,\n+ props : TProps,\n+ key : string | boolean | number | null,\n+ ref : string | null\n+};\n+\n+type ReactFragment = Array;\n+\n+type ReactNodeList = ReactNode | ReactEmpty;\n+\n+type ReactText = string | number;\n+\n+type ReactEmpty = null | undefined | boolean;\n+```\n+\n+__클래스와 컴포넌트__\n+\n+```\n+type ReactClass = (TProps) => ReactComponent;\n+\n+type ReactComponent = {\n+ props : TProps,\n+ render : () => ReactElement\n+};\n+```\n+\n","body":"","commit":{"revision":"a4f9c67dbb2a3c8160174bf62ab15d57359c1b66","authorEmail":"dittos@gmail.com","subject":"Create ref-09-glossary.ko-KR.md","shortRevision":"a4f9c67dbb","authoredAt":"2015-02-01T23:56:59+09:00","authorName":"Taeho Kim"},"files":[{"status":"A","path":"docs\/docs\/ref-09-glossary.ko-KR.md"}],"parents":["87d6c59ebf0726f139cfd80dcec31e7e8d93a443"]}

dillon1000/react

Files changed