불변성이란?
검색해 보면 '변하지 않는 성질' 이라 정의하고 있음. JS에서 불변성이란 '기존의 값을 그대로 유지하면서 새로운 값을 추가 하는것'을 말함.
불변성의 예
const a = [];
const b = a;
console.log(a === b); // true
const c = [...a];
console.log(a === c); // false- b는 배열a의 가르키고 있음. 그럼으로 둘은 동일한 배열임.
- c는 배열a의 값을 전개연산자를 통해 복사 했음 둘은 다른 배열임.
React에서의 활용
const [state, setState] = useState(
{
1:1,
2:2
}
);
setState({
...state, // 기존의 값 복사
3: 3
})- 기존 값을 유지하면서 새로운 값을 추가함.
... 전개연산자의 얕은 복사(shallow copy)
전개연산자를 통하여 객체나 배열의 값을 복사할때는 얕은 복사를 하게 됨. 즉 완전히 새로 복사 하는게 아니라 가장 바깥쪽에 위치한 값만 복사 됨.
const a = [{1:1, 2:2}];
const b = [...a];
console.log(a === b); // false // a와 b는 다른배열.
console.log(a[0] === b[0]); // true // 요소들은 같은 요소임. 얕은 복사 했기 때문.
b[0] = { // 값을 새로 할당
...b[0]
}
console.log(a[0] === b[0]); // false // 이제 다른 요소.- 구조의 깊이가 깊어질수록 전개연산자를 통한 불변성 유지가 힘들어짐.
Immer.js
위의 문제를 해결하기 위해 나온 라이브러리가 바로 Immer.js 임. 상태를 업데이트할때 불변성을 관리해줌.
- 설치 : yarn add immer 또는 npm i immer
import produce from "immer";
const [state, setState] = useState(
{
1:1,
2:2
}
);
setState(produce(state, draft => {
draft[3] = 3;
}))- setState의 인자로 produce 함수를 넣어줌. produce 함수의 첫번째 인자로 변경하고자 하는 것을 넣어주고 두번째 인자는 콜백함수임. 즉 draft가 첫번째 인자로 넣은 변경하고자 하는 객체나 배열이 됨. 함수 안에서 새로 만들고 싶은 값을 작업 해주면 됨.
ansuzh