Redux
immutable하게 데이터를 수정하기 위한 라이브러리 - immer 사용법
Socratone
2020. 4. 25. 03:03
리덕스는 데이터를 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;
});