Immutable Data and React (2/3)

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

근데, 이걸 왜 사용해야 하나?

아직까진 자바스크립트에는 멀티스레드 개념이 없고, 동시성에 대한 처리도 필요없다.

하지만, 프로세서는 갈수록 빨라지고, 여러 개의 코어가 동시에 처리할 수 있게 되었다.

자바스크립트에서도 언젠가 멀티스레딩을 도입하게 되지 않을까?

이런 관점에서 Immutability 는 미래에 여러 문제를 해결할 수 있을 거라 본다.

그래. 미래는 미래로 두고,

지금 있는 문제점을 확인해보자.

Mutable Object 는 시간과 값이 섞여있다.

예를 들면, 아래와 같은 식이다.

위 코드처럼, 시간이 지나면서 값을 변경하는데, 이전으로 돌아가도 값을 되돌릴 수 없다.

이 부분이 중요한 개념인데, Immutable data 는 이런 복잡성을 제거할 수 있다.

Mutable data 의 경우, 데이터의 값을 변경하는 주체(Mutator)가 많아지는 것도 흔히 발생하는 문제다.

위 코드에서 `data.key`의 값이 `value` 임을 보장할 수 있을까?

`touchFn`에 어떤 코드가 어떻게 data 를 변경할 지 알 수 없다.

이 문제를 해결하려면, "뭐가 변경되었는지"를 확인하는 방법으로 우회할 수 있다.

예를 들어, 아래와 같은 코드가 있다고 해보자.

데이터를 불러와서 렌더링하는 코드이지만,

`loadDataIntoStore()` 작업에서 코드가 어떻게 변경되었는지, 그 이후에 비동기로 동작하는 코드는 없었는지 확인하기 어렵다.

이럴 땐, `Object.observe()`를 사용해서 객체의 어떤 부분이 변경되었는지를 감지할 수 있다.

아래 코드처럼 말이다.

이렇게 하면, `dataStore`의 값이 변경될 때마다 다시 렌더링할 거다.

우리가 원하던 것이다.

하지만, 만약 값이 연속적으로 변하고, 변경된 내용을 업데이트하는 코드의 비용이 엄청 크다면 어떨까?

아니면, `Object.observe()`가 변경을 감지할 수 없는, 하위 뎁스의 값을 변경한 경우라면 어떻게 처리해야 할까?

뭐 아래처럼 전체 객체를 훑어볼 수도 있겠지만,

observe 하고 있던 하위 객체가 변경된다면, 역시 제대로 동작하지 않을 것이다.

그리고 이전 데이터의 값을 변경했다면? 의도치 않게 렌더링이 일어날 수 있다.

또 다른 방법으로, 변경 여부를 Dirty bits 로 처리하는 방법도 있다.

이 방법은 꽤 괜찮을 수 있다.

그치만, 더티 플래그를 잘 관리하지 않으면, 오히려 더 복잡해질 수 있다.

그리고, 최근의 UI Framework들은 오히려 모델과 뷰가 커플링되도록 만들기도 한다.

Immutable 은 이런 문제를 잘 해결할 수 있다.

값을 설정할 때마다 새 객체가 리턴되고, 변경된 경우 `===`로 비교할 수 있다.

뎁스가 깊은 경우에도 정확히 비교할 수 있다.

위 코드는 맵 안에 다른 맵이 있는 경우인데, 뎁스 단위로 키를 찾아갈 수 있다.

상위 객체는 변경되었지만, 하위 객체는 재활용되기 때문에 동일하다.

Memoization에 대해서도 얘기해보자.

비용이 많이 드는 작업을 반복하는 경우, `memoize()`로 이전 값을 캐시해 사용할 수 있다.

인터넷에 보면, 아래와 같은 `memoize` 코드가 있긴 한데,

`JSON.stringify()`는 엄청 비용이 많이 드는 작업이라 이 코드는 쓸 수가 없다.

좀 더 빠르게 계산할 수 있는 코드로 해보자.

위 코드, 처음엔 잘 동작하겠지만,

이미 추가했던 값을 다시 추가하면, `arg === prevArg` 조건 때문에 의도한 결과가 나오지 않을 거다.

하지만, Immutable 으로 구현했다면 어땠을까?

짜잔~

http://ohgyun.com/587 에서 계속...