[React] immer를 사용한 불변성 지키기

immer라이브러리 사용하기

사용용도

immer를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성을 유지하게 해줌!

 

 

• 불변성을 깨트리는 행위의 코드

const object = {
	a:1,
    b:2
};

object.b = 3; // b의 값을 직접적으로 수정하면 안됨

 

• 불변성을 유지하면 변경한 올바른 코드

cosnt object = {
	a:1,
    b:2
}

const nextObject = {
	...object, // 스프레드 기법을 사용하여 a, b값그대로 복사후
    b: 3 // b값을 덮어 씌어줌
}

 

라이브러리 설치

 

프로젝트의 터미널에서 immer설치 명령어 입력

$ yarn add immer

immer 라이브러리를 사용할 땐 import를 통해 immer를 불러옴.보통 produce라는 이름으로 불러온다는 것!

import produce form 'immer';

개발자도구(F12)의 console창에서 immer사용 방법

컴포넌트에서 window에서 produce사용할 수 있는 함수 실행을 통해 console창에서도 immer연습 가능!

window.produce = produce;

 

immer사용 / 예시1) 객체

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

// state - 바꿔 주고싶은 객체 또는 배열
// draft - 어떻게 바꿀지에 대한 함수
const nextState = produce(state, draft => {
	draft.number += 1; // 불변성을 지키면서 새로운 객체를 만들어줌
})

nextState
// 결과 값
// {number: 2, dontChangeMe:2}

'draft 자체는 state와 같다'라는 점! 그래서 draft.number로 접근 가능!

 

immer사용 / 예시2) 배열

const array = [
	{ id:1, text:'hello' },
    { id:2, text:'lalalal' },
    { id:3, text:'penha' },
];

const nextArray = produce(array, draft =>{
	draft.push({ id:4, text:'blabla' });
    draft[0].text = draft[0].text + ' world';
});

nextArray
// 결과값
/*

  0: { id:1, text:'hello world' },
  1: { id:2, text:'lalalal' },
  2: { id:3, text:'penha' },
  3: { id:4, text:'blabla'}

*/

 

immer(produce)를 사용하면 기존의 array의 배열 값은 그대로 유지하면서,

추가되는 배열은 새로운 배열을 만들어주기에 불변성을 지킬 수 있음!!!!!!!

 

 

 

 

Immer 은 분명히 정말 편한 라이브러리인것은 사실이지만

성능적으로는 Immer 를 사용하지 않은 코드가 조금 더 빠르다는 점!

 

Immer 는 JavaScript 엔진의 Proxy 라는 기능을 사용하는데,

구형 브라우저 및 react-native 같은 환경에서는 지원되지 않으므로

(Proxy 처럼 작동하지만 Proxy는 아닌)ES5 fallback 을 사용.

ES5 fallback 을 사용하게 되는경우는 191ms 정도로, 꽤나 느려지게 된다는 점!

 

데이터 구조가 복잡해질 때 사용하고,

간단히 처리 될 수 있는 곳에서는 그냥 일반 JavaScript로 구현하는 것이 좋음!