You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.9 KiB
74 lines
2.9 KiB
10 years ago
|
---
|
||
|
|
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를 바로 선언할 수 있게 될 것입니다.
|