[Node] Immer 라이브러리를 이용하여 더 쉬운 불변성 관리

 

 Node.js 에서는 var 말고도 let, const 같은 다양한 변수 형태를 제공합니다. 그 중 const를 이용하여 객체를 생성하게 되면 불변성의 객체로 자바에서 이야기를 하자면 final 변수와 같은 기능을 하게 되어 값이 변하지 않게 함을 알 수 있을 것입니다. 

 

 이러한 불변성의 객체라도 우리는 데이터를 전송과 더불어 여러 작업들을 하게 되면 불변성의 객체가 변해야 하는 때가 있을 것이라고 생각합니다. 

 

 오늘은 불변성 관리, 즉 const 변수의 값의 변동을 도와주는 라이브러리인 Immer 를 알아보도록 하겠습니다.

 

 

# Contents

---

• 불변성이란
• lmmer

 

 

# 불변성이란

---

 변수 하나를 설정하도록 하겠습니다. 이것의 변수는 const 로 설정하고, 변수의 값은 심플하게 아래와 같이 선언하였습니다.

 

const a = 1;
console.log(++a);

 

 

 결과 값은 어떻게 나올까요?? 안타깝게도 에러가 나오게 됩니다.

 당연하게도 const로 되어 있는 변수의 값을 수정하려고 하니 에러가 나오는 것은 당연하다고 생각합니다.

 

 하지만 아래와 같은 값은 어떻게 나올까요?

 

const a = 1;
const b = a + 1;
console.log(b);

 

 당연하게도 결과는 2가 나오게 됩니다.

 그러면 아래에 결과는 어떻게 나올까요?

 

const abc = [1, 2, 3];

abc[2] = 4;
console.log(...abc);

 

 노드에서는 잘 나오지만, 리액트에서는 나오지 않습니다. 변수가 바뀌면 리액트의 특성 상 리렌더링 되어집니다. 물론 변수가 useState 혹은 useReducer 등에 한정이긴 하지만 이러한 변수들의 마음대로 바뀐다면 화면이 자꾸 자꾸 변경되고 아마 리액트를 사용하는 사람은 없을 것이라고 생각합니다. 이렇게 불변성을 지원하는 리액트에서 변수의 값을 변경하는 방법은 사실 객체를 하나 더 만들어서 다음 객체에 넣어버리면 되는 것입니다. 아까 위에서 했던 것처럼 말이죠.

 

 그런데 값이 많고 변경할 것이 많다고 생각하다면 이러한 로직을 구성하는 것 또한 힘든 일이라고 생각한 나머지 우리는 리액트의 라이브러리 Immer 를 사용하면 아주 쉽게 불변성을 관리할 수 있게 됩니다.

 

 

# Immer

---

 Immer 의 라이브러리를 설치하는 방법은 아래와 같습니다.

 

npm install --save immer

 

 그리고 설치된 라이브러리를 사용하는 방법은 아래와 같습니다.

 

import produce from 'immer';

 

그리고 produce 함수를 사용 할 때에는 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어줍니다.

두번째 파라미터에 넣는 함수에서는 불변성에 대해서 신경쓰지 않고 그냥 업데이트 해주면 다 알아서 해줍니다.

 

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

const nextState = produce(state, draft => {
  draft.number += 1;
});

console.log(nextState);
// { number: 2, dontChangeMe: 2 }

 

Immer 은 분명히 정말 편한 라이브러리인것은 사실입니다. 하지만, 확실히 알아둘 점은, 성능적으로는 Immer 를 사용하지 않은 코드가 조금 더 빠르다는 점 입니다.

 

 

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