Immutable Data and React (3/3)

http://ohgyun.com/586 에 이어서...

Immutable은 React와 효과적으로 동작할 수 있다.

React 에선, `shouldComponentUpdate()`메서드를 오버라이드하면, 컴포넌트를 다시 렌더링할 것인지를 판단할 때 훅으로 동작한다.

렌더링 전에 이전 값을 캐시해뒀다가(momoize) 비교하면, 불필요한 렌더링을 효과적으로 걸러낼 수 있을 것이다.

기본값은 아래처럼 true 이다.

여기에 정말 값이 변경되었는지를 추가하면 좀 더 효율적으로 처리할 수 있는데, 대략 아래와 같은 코드일 것이다.

이 코드를 사용하는 믹스인이 바로 PureRenderMinxin 이다.

이 믹스인은 `shouldComponentUpdate()`를 오버라이드 했고, 현재/이전 값을 비교해서 값이 동일한 경우, `false`를 리턴한다.

하지만, 위에 언급한 것처럼, shallow 하게 레퍼런스로만 값을 비교하기 때문에 어떤 경우엔 의도한 것과 다르게 동작할 수 있다.

위의 `shallowEqual()`의 코드는 아래처럼 각 객체의 레퍼런스를 비교한다.

Immutable 데이터를 Pure Render Mixin 과 함께 사용하면, 훨씬 빠르게 렌더링할 수 있다!

Flux 아키텍처에서는 스토어에서 변경되는 데이터를 포함하고 있다.

Todo 앱 예제를 보자.

위와 같이 Store 에서 Dispatcher 에 액션에 대한 처리하는 코드에서, `todos` 객체를 mutable 하게 처리하고 있다.

이 코드대로라면, 새 아이템을 추가하는 경우 모든 아이템이 새로 갱신된다.

이 코드를, Immutable과 Pure Render Mixin과 함께 사용하면, 렌더링 성능을 훨씬 향상시킬 수 있다.

`todos`를 순서가 있는 `OrderedMap`으로 바꿔 정의하기만 하면 된다!

그리고 Pure Render Mixin을 추가한다.

이렇게 하면, 렌더링 성능 향상도 있고,

Flux store 의 값이 시간이 지나더라도 고유하게 유지될 수 있다.

뽀너스로, Immutable 로는 Undo 도 간단하다! 

결론: