본문 바로가기

Redux

immutable하게 데이터를 수정하기 위한 라이브러리 - immer 사용법

리덕스는 데이터를 immutable 하게 수정한다.

때문에 데이터를 수정하려면 Object.assign이나 spread operator를 사용해야 한다.

그러나 객체 안의 객체까지 deep copy를 하려면 코드가 지저분해질 수밖에 없다.

 

const person = {

    name: 'socratone',

    address: {

        country: 'korea',

        city: 'seoul'

    }

};

 

const updated = {

    ...person,

    address: { 

        ...person.address, // 윗줄의 address가 같은 객체를 가리키지 않도록

        city: 'nonsan' // city를 nonsan으로만 바꿨다.

    }

};

 

deep copy를 하기 위해 객체를 거의 새로 쓰다시피했다.

 

이런 복잡함을 줄이려 라이브러리를 쓸 수 있다.

유명한 라이브러리로는 immutable, immer, Mori가 있는데

여기서는 immer를 소개한다.

 

먼저 터미널에서 npm i immer를 입력해 설치한다.

 

아래처럼 produce 메소드를 사용해서 새로운 객체를 만들 수 있다.

 

import { produce } from 'immer';

 

const book = { title: 'history' };

 

const updated = produce(book, obj => {

    obj.page = 100;

});

 

참고: https://youtu.be/poQXNp9ItL4?t=3277

'Redux' 카테고리의 다른 글

Redux Toolkit State를 리셋하는 방법  (0) 2021.11.01
Redux의 코드를 간결하게 해주는 @reduxjs/toolkit  (0) 2020.12.05
Redux 기본 사용 방법  (0) 2020.04.25