[ React ] [Chapter 14] 쉽게 하는 불변성 관리

쉽게 하는 불변성 관리 immer 라이브러리

 

리액트에서는 배열이나 객체를 업데이트 해야할 때 직접 수정 하면 안되고 불변성을 지켜주면서 업데이트를 해야한다.
안그러면 리액트에서 해당 데이터 값으 무엇인지 몰르기 때문에 불변성을 지켜주면서 업데이트를 해야한다.

const jsonTest = { a : 1, b : 2 };
jsonTest.b = 3

이와 같이 하면 안된다는거죠.

그런대 대부분 불변성을 지켜주면서 업데이트를 한다면

const jsonTest = { a : 1, b : 2 };
const nextJsonTest = { ...jsonTest, b : 3 };

이와 같이 하죠(...jsonTest는 비구조 할당이라고 합니다 해당 같이 하면 해당 객체를 비구조로 할당할 수 있습니다.)

그런데 이와 같이 간단한 객체의 구조나 배열의 구조라면 저렇게 해도 쉽게 할수 있고 불편하지도 않습니다. 코드 보기에도 편하고요

하지만 만약 배열의 구조나 객체의 구조가 트리의트리의트리 거나 복잡한 구조일시에 불변성을 지켜주면서 하기에는 매우 까다롭습니다.

const state = {
  members: [
    {
      id: 'memberId01',
      name: '홍길동',
      age: 20,
      item: [
        {
          id: 1,
          name: '노트'
        }
      ]
    },
    {
      id: 'memberId02',
      name: '이수근',
      age: 48,
      item: [
        {
          id: 1,
          name: '볼펜'
        }
      ]
    }
  ],
  componentId: 1
};

이와 같은 데이터가 있다고 가정 하겠습니다 위와 같은 데이터 구조는 꽤 복잡하죠

이 데이터에 member의 id가 memberId01인 member객체를 찾아서 item객체를 추가 해줘야한다면?
말로만 들어도 뭔가 복잡하죠 그럼 이 구조로 자주쓰는 불변성 유지하면서 업데이트 해보겠습니다.

const nextState = {
  ...state,
  members: state.members.map(it =>
    it.id === 'memberId01'
      ? {
          ...it,
          item: it.item.concat({
            id: 2,
            name: '컴퓨터'
          })
        }
      : it
  )
};

이렇게 해야하죠 코드 짜는게 어려운건 아니지만 작성해야하는 코드가 많아 불편하고, 코드 보기에 한 눈에 안들어와 보기도 힘듭니다.

이럴 때 사용 하는 것이

immer 라이브러리 입니다.

immer 라이브러리를 사용하면 다음과 같다.

const nextState = produce(state, draft => {
  const member = draft.members.find(member => member.id === 'memberId01');
  member.item.push({
    id: 2,
    name: '컴퓨터'
  });
});

immer 라이브러리를 사용하면 훨씬 깔끔하고 보기에도 편합니다.

immer이 불변성을 대신 관리해줘서 작성하기에도 편하고 보기에도 편합니다.

immer

 

그럼 immer을 어떻게 사용하는지 볼까요

우선 immer을 깔아줍니다

$ yarn add immer
// yarn을 안쓴다면
$ npm i immer

다 깔아주고

쓸 컴포넌트에 import 해줍니다.

import produce from 'immer';

그다음 produce 함수로 관리를 해줍니다.

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

첫번째 요소는 수정하고 싶은 state, 두번째 요소는 업데이트할 함수를 정의하면 됩니다.

해당 함수에서 불변성 신경 안쓰고 업데이터 작성해도 해당 라이브러리가 불변성을 대신 관리 해주면서 업데이트를 해줍니다.

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~