불변성
불변성이란 메모리 영역에서 값이 변하지 않는 것을 의미한다.
원시타입
Boolean, String, Number, null, undefined, Symbol
고정된 크기로 메모리에 저장, 실제 데이터가 변수에 할당된다.
참조타입
Object, Array
데이터 크기가 정해지지 않고 메모리에 저장된다.
데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당된다.
heap
데이터에서 최댓값과 최솟값을 빠르게 찾기 위해 고안된 완전 이진 트리(Complete Binary Tree)
let array = [1, 2, 3, 4] // 메모리영역 1
array.push(5) // 메모리영역 1
array = [1, 2, 3, 4] // 메모리영역 2 (새로운 참조값)리액트에서 불변성을 지키는 이유
리액트가 상태를 업데이트를 하는 원리
리액트는 상태값을 업데이트 할 때 얕은 비교를 수행한다.
배열이나 객체의 속성을 하나하나 비교하는 것이 아니라, 이전 참조값과 현재 참조값만을 비교하여 상태 변화를 감지한다.
이러한 이유로, 배열이나 객체를 업데이트할때 우리는
setState([...state, newState]), setState({...state, [key]: value}) 이런식으로 새로운 참조값을 가진 배열이나 객체를 생성하는 것이다.
그래서 불변성을 지킴으로써 리액트는 상태변화를 감지 할 수 있다.
효율적인 상태 업데이트
얕은 비교는 리소스를 줄여주기 때문에 효율적으로 상태를 업데이트 할 수 있다.
얕은 비교 : 프로퍼티 하나하나 다 비교하지 않고, 객체의 참조 주소값만 변경되었는지 확인한다.
사이드 이펙트 방지 및 프로그래밍 구조의 단순성
참조타입인 경우엔 값을 변경할 때 원본데이터가 변경될 여지가 있다.그러면, 불변성이 지켜지지 않는다.
원본 데이터가 변경되면, 다른 곳에서 사이드이펙트가 생길 가능성 ⬆️ 프로그래밍의 복잡도 ⬆️.
그래서 불변성을 지켜주면, 사이드 이펙트를 방지하고 프로그래밍의 구조를 단순하게 유지할 수 있다.
어떻게 지키는거야?
spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 사용하면 된다.
리듀서 내부에서의 불변성
내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문이다.
객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지할 수 있다.
전개 연산자 단점 보완
spread연산자의 경우 객체의 깊이가 깊어질수록 로직 구성이 어려워진다.
immer라이브러리를 이용해서 스프레드 연산자 없이 불변성을 유지해주고 사이드 이펙트를 막아준다.
