Shim Won
10 years ago
committed by
Jay Jaeho Lee
1 changed files with 30 additions and 0 deletions
@ -0,0 +1,30 @@ |
|||
--- |
|||
id: pure-render-mixin-ko-KR |
|||
title: PureRenderMixin |
|||
permalink: pure-render-mixin-ko-KR.html |
|||
prev: update-ko-KR.html |
|||
next: perf-ko-KR.html |
|||
--- |
|||
|
|||
React 컴포넌트의 렌더 함수가 "pure"하다면 (다른 말로, props나 state에 같은 값이 주어질 때 같은 결과를 렌더한다면) 몇몇 경우엔 이 믹스인을 사용하여 성능을 향상시킬 수 있습니다. |
|||
|
|||
예제: |
|||
|
|||
```js |
|||
var PureRenderMixin = require('react/addons').addons.PureRenderMixin; |
|||
React.createClass({ |
|||
mixins: [PureRenderMixin], |
|||
|
|||
render: function() { |
|||
return <div className={this.props.className}>foo</div>; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
내부적으로 믹스인은 현재의 props와 state를 다음 값과 비교하여 같다면 `false`를 반환하도록 [shouldComponentUpdate](/react/docs/component-specs-ko-KR.html#updating-shouldcomponentupdate)를 구현합니다. |
|||
|
|||
> 주의: |
|||
> |
|||
> 여기서는 객체에 대한 얕은(shallow) 비교만 합니다. 복잡한 데이터 구조를 가진 경우에는 깊은 부분의 차이에 대해 잘못된 false를 반환 할 수도 있습니다. 간단한 props와 state를 사용하는 컴포넌트에만 적용하거나 깊은 데이터 구조가 변경 되었을때는 `forceUpdate()`를 사용하세요. 아니면 중첩 데이터의 비교를 빠르고 용이하게 하기 위해 [immutable 객체](http://facebook.github.io/immutable-js/)의 도입을 고려해보세요. |
|||
> |
|||
> 또, `shouldComponentUpdate`는 컴포넌트 서브트리의 업데이트를 건너뜁니다. 모든 자식 컴포넌트들도 "pure"한지 확인하세요. |
Loading…
Reference in new issue