react.dev/docs/10.8-pure-render-mixin.ko-KR.md

id	title	permalink	prev	next
pure-render-mixin-ko-KR	PureRenderMixin	docs/pure-render-mixin-ko-KR.html	update-ko-KR.html	perf-ko-KR.html

React 컴포넌트의 렌더 함수가 "pure"하다면 (다른 말로, props나 state에 같은 값이 주어질 때 같은 결과를 렌더한다면) 몇몇 경우엔 이 믹스인을 사용하여 성능을 향상시킬 수 있습니다.

예제:

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});

내부적으로 믹스인은 현재의 props와 state를 다음 값과 비교하여 같다면 false를 반환하도록 shouldComponentUpdate를 구현합니다.

주의:

여기서는 객체에 대한 얕은(shallow) 비교만 합니다. 복잡한 데이터 구조를 가진 경우에는 깊은 부분의 차이에 대해 잘못된 false를 반환 할 수도 있습니다. 간단한 props와 state를 사용하는 컴포넌트에만 적용하거나 깊은 데이터 구조가 변경 되었을때는 forceUpdate()를 사용하세요. 아니면 중첩 데이터의 비교를 빠르고 용이하게 하기 위해 immutable 객체의 도입을 고려해보세요.

또, shouldComponentUpdate는 컴포넌트 서브트리의 업데이트를 건너뜁니다. 모든 자식 컴포넌트들도 "pure"한지 확인하세요.