{"commit":{"authorName":"Shim Won","authoredAt":"2015-01-30T12:20:33+09:00","subject":"Translate 04 to Korean","authorEmail":"marocchino@gmail.com","shortRevision":"7eabccc214","revision":"7eabccc214c96e74ee049a0f026f43be403e86bb"},"files":[{"status":"A","path":"docs\/docs\/04-multiple-components.ko-KR.md"}],"body":"- Up to e4352ef","parents":["8387f3bbc4479e6171f8ef8b7908d9c37f6c4e93"],"patch":"diff --git a\/docs\/docs\/04-multiple-components.ko-KR.md b\/docs\/docs\/04-multiple-components.ko-KR.md\nnew file mode 100644\nindex 0000000000..7b776c94eb\n--- \/dev\/null\n+++ b\/docs\/docs\/04-multiple-components.ko-KR.md\n@@ -0,0 +1,208 @@\n+---\n+id: multiple-components-ko-KR\n+title: 복합 컴포넌트\n+permalink: multiple-components.ko-KR.html\n+prev: interactivity-and-dynamic-uis.ko-KR.html\n+next: reusable-components.html\n+---\n+\n+지금까지, 단일 컴포넌트에서 데이터를 표시하고 유저 입력을 다루는 것을 살펴보았습니다. 다음엔 React의 최고의 기능 중 하나인 조합가능성(composability)을 살펴봅시다.\n+\n+\n+## 동기: 관심의 분리\n+\n+명확히 정의된 인터페이스와 다른 컴포넌트를 재사용해 모듈러 컴포넌트를 구축하면, 함수와 클래스를 이용했을 때 얻을 수 있는 이점 대부분을 얻을 수 있습니다. 특히 앱에서 *다른 관심을 분리*할 수 있습니다.아무리 간단히 새 컴포넌트를 만들었다고 해도 말이죠. 당신의 애플리케이션에서 쓸 커스텀 컴포넌트 라이브러리를 만들어서, 당신의 도메인에 최적화된 방법으로 UI를 표현할 수 있게 됩니다.\n+\n+\n+## 조합(Composition) 예제\n+\n+간단히 페이스북 그래프 API를 사용해 프로필 사진과 유저이름을 보여주는 아바타 컴포넌트를 만든다고 합시다.\n+\n+```javascript\n+var Avatar = React.createClass({\n+ render: function() {\n+ return (\n+

\n+ \n+ \n+ <\/div>\n+ );\n+ }\n+});\n+\n+var ProfilePic = React.createClass({\n+ render: function() {\n+ return (\n+

\n+ );\n+ }\n+});\n+\n+var ProfileLink = React.createClass({\n+ render: function() {\n+ return (\n+ \n+ {this.props.username}\n+ <\/a>\n+ );\n+ }\n+});\n+\n+React.render(\n+ ,\n+ document.getElementById('example')\n+);\n+```\n+\n+\n+## 소유권(Ownership)\n+\n+위의 예제에서, `Avatar` 인스턴스는 `ProfilePic`과 `ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메서드 안에서 만들어졌다면, `Y`가 `X`를 *소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 중요한 성질이 UI가 일관성 있도록 해줍니다.\n+\n+소유(owner-ownee)관계와 부모·자식 관계를 구별하는 것은 중요합니다. 부모·자식 관계가 DOM에서부터 쓰던 익숙하고 이미 알고있던 단순한 것인 한편, 소유관계는 React 고유의 것입니다. 위의 예제에서, `Avatar`는 `div`, `ProfilePic`, `ProfileLink`인스턴스를 소유하고, `div`는 `ProfilePic`과 `ProfileLink`인스턴스의 (소유자가 아닌) **부모**입니다.\n+\n+\n+## 자식\n+\n+React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트나 JavaScript 표현식을 시작과 끝 태그 사이에 넣을 수 있습니다. 이렇게 말이죠.\n+\n+```javascript\n+<\/Parent>\n+```\n+\n+`Parent`는 `this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](\/react\/docs\/top-level-api.html#react.children)를 사용해 자식들을 관리합니다.\n+\n+\n+### 자식 Reconciliation\n+\n+**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 랜더 패스가 있다고 해봅시다.\n+\n+```html\n+\/\/ Render Pass 1\n+\n+

Paragraph 1<\/p>\n+

Paragraph 2<\/p>\n+<\/Card>\n+\/\/ Render Pass 2\n+\n+

Paragraph 2<\/p>\n+<\/Card>\n+```\n+\n+직관적으로 보면, `

Paragraph 1<\/p>`가 없어졌습니다만 그러는 대신에, React는 첫 번째 자식의 텍스트를 비교조정하고 마지막 자식을 파괴하도록 DOM을 비교조정할 것입니다. React는 자식들의 *순서*에 따라 비교조정합니다.\n+\n+\n+### 상태기반(Stateful) 자식\n+\n+대부분의 컴포넌트에서는, 이것은 큰 문제가 아닙니다. 하지만 렌더 패스 간에 `this.state`를 유지하는 상태기반의 컴포넌트에서는 매우 문제가 될 수 있습니다.\n+\n+대부분의 경우, 이 문제는 엘리먼트를 파괴하지 않고 숨김으로써 피해갈 수 있습니다.\n+\n+```html\n+\/\/ Render Pass 1\n+\n+

Paragraph 1<\/p>\n+

Paragraph 2<\/p>\n+<\/Card>\n+\/\/ Render Pass 2\n+\n+

Paragraph 1<\/p>\n+

Paragraph 2<\/p>\n+<\/Card>\n+```\n+\n+\n+### 동적 자식\n+\n+자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 리스트의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 랜더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다.\n+\n+```javascript\n+ render: function() {\n+ var results = this.props.results;\n+ return (\n+

{result.text}<\/li>;\n+ })}\n+ <\/ol>\n+ );\n+ }\n+```\n+\n+React가 키가 있는 자식들을 비교조정할 때, React는 `key`가 있는 자식이 (오염(clobbered)되는 대신) 재배치되고 (재사용되는 대신) 파괴되도록 보장할 것입니다.\n+\n+`key`는 *항상* 배열 안의 각 컴포넌트의 컨테이너 HTML 자식이 아닌 컴포넌트에게 직접 주어져야 합니다.\n+\n+```javascript\n+\/\/ 틀림!\n+var ListItemWrapper = React.createClass({\n+ render: function() {\n+ return
{this.props.data.text}<\/li>;\n+ }\n+});\n+var MyComponent = React.createClass({\n+ render: function() {\n+ return (\n+

dillon1000/react

Files changed