Jinwoo Oh
10 years ago
committed by
Jay Jaeho Lee
15 changed files with 249 additions and 31 deletions
@ -0,0 +1,73 @@ |
|||
--- |
|||
id: create-fragment-ko-KR |
|||
title: 키가 할당된 프래그먼트 |
|||
permalink: create-fragment-ko-KR.html |
|||
prev: clone-with-props-ko-KR.html |
|||
next: update-ko-KR.html |
|||
--- |
|||
|
|||
대부분의 경우는 `key` prop으로 `render`에서 반환된 엘리먼트에 키를 명시할 수 있습니다. 하지만 말썽을 부리는 경우가 한가지 있습니다: 재정렬을 할 두개의 자식 집합을 가지고 있는 경우, 감싸는 엘리먼트 없이 각각의 집합에 키를 부여하는 것은 불가능 합니다. |
|||
|
|||
이 말은, 만약 다음과 같은 컴포넌트가 있다면: |
|||
|
|||
```js |
|||
var Swapper = React.createClass({ |
|||
propTypes: { |
|||
// `leftChildren`과 `rightChildren`은 문자열, 엘리먼트, 배열 혹은 다른 무언가 일 수 있음. |
|||
leftChildren: React.PropTypes.node, |
|||
rightChildren: React.PropTypes.node, |
|||
|
|||
swapped: React.PropTypes.bool |
|||
} |
|||
render: function() { |
|||
var children; |
|||
if (this.props.swapped) { |
|||
children = [this.props.rightChildren, this.props.leftChildren]; |
|||
} else { |
|||
children = [this.props.leftChildren, this.props.rightChildren]; |
|||
} |
|||
return <div>{children}</div>; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
`swapped` prop을 변경할 경우 자식은 마운트 해제되거나 다시 마운트 될 수 있습니다. 두 자식 집합에 키가 할당되지 않았기 때문입니다. |
|||
|
|||
이 문제를 해결하기 위해서 `React.addons.createFragment`를 사용해 자식 집합에 키를 부여할 수 있습니다. |
|||
|
|||
#### `ReactFragment React.addons.createFragment(object children)` |
|||
|
|||
배열을 만드는 대신에 다음과 같이 해볼 수 있습니다: |
|||
|
|||
```js |
|||
if (this.props.swapped) { |
|||
children = React.addons.createFragment({ |
|||
right: this.props.rightChildren, |
|||
left: this.props.leftChildren |
|||
}); |
|||
} else { |
|||
children = React.addons.createFragment({ |
|||
left: this.props.leftChildren, |
|||
right: this.props.rightChildren |
|||
}); |
|||
} |
|||
``` |
|||
|
|||
전달된 객체의 키(`left`, `right`)는 모든 자식 집합의 키로 사용됩니다. 그리고 객체에서 키들의 순서는 렌더된 자식들의 순서를 결정하는데 사용됩니다. 이러한 변경으로 두 자식 집합은 언마운팅하지 않고도 DOM에서 적절하게 재정렬 됩니다. |
|||
|
|||
`createFragment`의 반환값은 불명확한 객체로 취급되어야 합니다; `React.Children` 헬퍼를 사용해 프래그먼트를 순환할 수 있지만 직접 접근해서는 안됩니다. 명세에는 없지만 모든 주요 브라우저와 VM들에서 JavaScript 엔진이 숫자가 아닌 키에 대해서도 객체 목록 순서를 보존한다는 점을 주의하세요. |
|||
|
|||
> **주의:** |
|||
> |
|||
> 미래에 `createFragment`는 대략 다음과 같은 API로 교체될 것입니다 |
|||
> |
|||
> ```js |
|||
> return ( |
|||
> <div> |
|||
> <x:frag key="right">{this.props.rightChildren}</x:frag>, |
|||
> <x:frag key="left">{this.props.leftChildren}</x:frag> |
|||
> </div> |
|||
> ); |
|||
> ``` |
|||
> |
|||
> JSX에서 엘리먼트로 감싸지 않고도 key를 바로 선언할 수 있게 될 것입니다. |
Loading…
Reference in new issue