react immer 불변성 관리

https://react.vlpt.us/basic/23-immer.html

실습중

 

기본적으로

Mutable한 객체는 생성된 이후에 상태가 변경될 수 있는 객체이고, Immutable한 객체는 생성된 이후에 상태가 변경되지 않는 객체를 말한다. 자바스크립트에서 Object와 Array를 제외한 모든 타입은 Immutable한 타입이다.

 

Immutable한 객체를 수정하는 것을 불가능하지만 업데이트를 하는 것은 가능하다.

const object = {
	a: 1,
    b:2
};
//기존 immutable 객체

const nextObject ={
	...object,
    b:3
}
//업데이트한 객체

 

위에 사항처럼 es6 sperad 연산자를 사용하여 업뎃할 수 있고

배열도 마찬가지로 push, splice, concat,filter ,map등 배열 메소드를 사용해서 업데이트 할 수 있다

 

그런데 이제 객체 내부구조가 조금 복잡해지면 업데이트 시 코드 또한 어질어질한데

그럴땐 Immer 라이브러리를 설치하면 간단하게 해결!

 

$ yarn add immer

 

import produce from 'immer'

const state = {
	number: 1,
    dontChangeMe: 2
}

const nextState = produce(state,draft =>{
	draft.number += 1;
   });
   
console.log(nextState);
// {number:2 , dontChangeMe : 2}

끝! 겁나 간단해서 당황했네 리액트 플젝을 시작할때는 Immer 라이브러리를 디폴트로 추가하는게 좋을듯?

 

---

인줄 알았으나 Immer를 사용했다고 무조건 적으로 간단해지지는 않는다고한다

글을 읽어보니

 

단, Immer 는 JavaScript 엔진의 Proxy 라는 기능을 사용하는데, 구형 브라우저 및 react-native 같은 환경에서는 지원되지 않으므로 (Proxy 처럼 작동하지만 Proxy는 아닌) ES5 fallback 을 사용하게 됩니다. ES5 fallback 을 사용하게 되는경우는 191ms 정도로, 꽤나 느려지게 됩니다. 물론, 여전히 데이터가 별로 없다면 크게 걱정 할 필요는 없습니다.

Immer 라이브러리는 확실히 편하기 때문에, 데이터의 구조가 복잡해져서 불변성을 유지하면서 업데이트하려면 코드가 복잡해지는 상황이 온다면, 이를 사용하는 것을 권장드립니다.

다만, 무조건 사용을 하진 마시고, 가능하면 데이터의 구조가 복잡해지게 되는 것을 방지하세요. 그리고 어쩔 수 없을 때 Immer 를 사용하는것이 좋습니다. Immer 를 사용한다고 해도, 필요한곳에만 쓰고, 간단히 처리 될 수 있는 곳에서는 그냥 일반 JavaScript 로 구현하시길 바랍니다.

그렇다고 한다.

나중에 데이터 depth가 깊을 때 한번 다시 읽어보도록 하자.