불변성 관리에 대하여

앞의 원시 타입에 대해 정리한 적이 있다. 그 연장선으로 불변성까지 이어보고자 한다.

• 원시타입 : number, string, boolean 등
• 참조 자료 타입 : 객체, 배열

• 불변성의 진짜 의미는 메모리 영역에서 값이 변하지 않는 것

• React는 상태 값을 업데이트할 때 얕은 비교를 하여 상태 변화를 감지한다(같은 레벨에서만 일어난다)

  • 얕은 비교 : 동등성 확인, 숫자&문자열 비교할 때 값을 비교한다. 객체를 비교할 때는 객체의 속성을 비교하지 않고 참조 위치만 비교한다

  • 깊은 비교: 객체의 경우에도 값으로 비교, 객체의 깊은 비교를 위해서는 간단하고 Object가 깊지 않은 경우에 JSON.stirngify()함수를 주로 쓴다

// 얕은 비교(객체 )
const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
console.log(obj1 == obj2); // false - 참조주소가 다르기에

// 얕은 비교(값)
const obj1 = 1
const obj2 = 1
console.log(obj1 == obj2); //true

// 깊은 비교(객체)
const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
console.log(obj1 === obj2); // false

• 원시타입의 경우는 메모리에 값이 저장되어있다. 재할당을 해도 직접적으로 변하지 않고 새로운 값이 생기면서 새로운 값을 바라보게 된다. 그러므로 메모리 공간의 주소가 바뀌므로 이전 값은 유지, 값의 변화를 감지한다.

• 객체를 얕은 비교한다면 기본적으로 같은 참조 위치를 가리키기에 값의 변화를 감지하지 못한다. 그러므로 객체 불변성을 유지해야한다.

  • 그 방법은 배열 혹은 객체의 원본을 수정하지 않고 상태 변경을 원하는 배열과 함수를 깊은 복사하고 사용해야하는 것이다
    (ex)[...] spread 연산자로 새로운 객체, 배열 만들어주기
  • 배열도 push나 splice로 직접 수정해주는 방법 대신 concat, filter,map 등의 원래 상태를 유지하는 함수를 써야한다

• Immer 라이브러리
  - 불변성을 신경쓰지 않고 업데이트를 할 수 있다

---

출처: https://velog.io/@nuo/%EC%96%95%EC%9D%80-%EB%B9%84%EA%B5%90%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B9%84%EA%B5%90
https://dori-coding.tistory.com/entry/React-%EC%96%95%EC%9D%80-%EB%B9%84%EA%B5%90%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B9%84%EA%B5%90%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://velog.io/@hyunn/Immer-%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EB%8D%94-%EC%89%AC%EC%9A%B4-%EB%B6%88%EB%B3%80%EC%84%B1-%EA%B4%80%EB%A6%AC