redux toolkit 은 내부적으로 immer를 지원해준다고 한다
이 immer 란 녀석은 "불변성"을 유지해주는 라이브러리인데
여기서 불변성이란 말에대해 구체적이지가 않아 이렇게 포스트를 쓰게 됬다
1.얕은검사 깊은검사
JavaScript 에서는 얕은검사와 깊은검사 라는 방식이 있는데
👉 얕은검사 : 두 개의 다른 변수 가 동일한 개체를 참조하는지 확인
👉 깊은검사 : 각 단계에서 각 속성의 값을 비교하면서 두 객체의 속성을 통한 재귀 탐색을 포함합
2.불변성
메모리 영역에서 값을 변경할 수 없다(상태를 변경하지 않는것)
이불변성이란 개념은 사실 함수형 프로그래밍 에서 비롯되었으며
아래와 같이 설명하고 있다
프로그래밍 세계에서 "같다" 라는건
두가지종류가있다
- reference equality(참조평등)
- value equality(가치평등)
내가 멋진빨간 자동차를 샀다
그런데 얼마지나지 않아 이웃도 멋진빨간 나와같은 자동차를 샀다
이것은 내차고 저것은 이웃의 차이다 이걸우리는 어떻게 식별하는가
여러가지 이유가 있겠지만 번호판이라는 데이터를 기반으로
내차와 이웃의 차이로 구분할수있다
자그럼 우리가 멋진빨간자동차를 객체라고 생각해보자
멋진빨간 자동차 객체가있고 자바스크립트에서는 번호판 기능을 하는
종류 가 내장되어있다
이렇게 번호판으로 비교하는것을 참조평등이라하며
자바스크립트에서는 이번호판 즉 참조평등을 가지고 객체를 비교하게된다
상태를 변경하는데 변경하지않으면서 원래의 상태를 변경하는것이다
응?
상태를 변경하는데 변경하지않으면서 원래의 상태를 변경
이게뭔 ...
react 의 속성에대해 알면 이해답을 찾을수 있다
react 속성
react 에선 부모컴포넌트가 렌더링이 되면 하위에있는 자식컴포 넌트도 리렌더링 하게된다 예를들어 객체 , 배열 과 같은 참조 타입들을 실제 값과 비교 하는게아니라 동일한 참조(같은메모리 값을)인지 비교하는것이다
3.불변성 이 왜 중요한가 ? (결론)
불변성이 지켜지지 않을 경우, 값이 새로워져도 바뀐 것을 감지 못함.
바뀐것을 감지 못할 경우, React.memo에서 서로 비교하며 최적화하는 것 불가능.
그래서 이렇게 불변성을 쉽게 다루기위해 immer 라는 라이브러리를 사용했던것이다
👇immer 사용전
const nextState = {
...info,
people: info.people.map((person) => person.id === 2 ?
{
...person,
add:person.add.concat({job:"student"}),
}
: person
),
};
출처: https://eunhee-programming.tistory.com/212 👇immer 사용후
const nextState = produce(info, (draft) => {
const person = draft.people.find((per) => per.id === 2);
person.add.push({ job: "student" });
});
출처: https://eunhee-programming.tistory.com/2124.불변성 이점
5.redux 공식문서 에서 말하는 불변성
출처- 리덕스 공식문서 : https://redux.js.org/faq/immutable-data#how-redux-uses-shallow-checking
6.불변성 == 성능최적화
react 에서 살펴보면
react 는 내부적으로 ui 업데이트에 필요한 비용이 많이드는 DOM
작업의 수를 최소화 하기 위해 여러가지 기술을 제공하는데
출처-리엑트공식문서 :https://reactjs.org/docs/optimizing-performance.html
참조
참조-리엑트 불변성 사용의 장단점 :
https://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/
침저 - 리엑트 불변성: https://hsp0418.tistory.com/171
참조: https://eunhee-programming.tistory.com/212
참조 :https://kyounghwan01.github.io/blog/React/immer-js/
