Todo List성능 최적화 #06_불변성의 중요성에 대해

useState를 사용하는 경우 기존데이터를 배열에서 수정하지 않고, 부분만 수정을 한 새로운 배열로 생성하게 된다.
기존의 값을 수정하지 않으면서 새로운 값을 만들어내는 것을 불변성을 지킨다라고 함.

const array = [1, 2, 3, 4, 5];


const nextArrayBad = array; // 배열을 복사하는 것이 아니라 똑같은 배열임
nextArrayBad[0] = 100;
console.log(array === nextArrayBad); // 완전히 같은 배열이기 때문에 true



const nextArrayGood = […array]; // 배열 내부의 값을 모두 복사함
nextArrayGood[0] = 100;
console.log(array === nextArrayGood); // 다른 배열이기 때문에 false



const object = {
  foo: ‘bar‘,
  value: 1
};



const nextObjectBad = object; // 객체가 복사되지 않고, 똑같은 객체임
nextObjectBad.value = nextObjectBad.value + 1;
console.log(object = = = nextObjectBad); // 같은 객체이기 때문에 true



const nextObjectGood = {
  …object, // 기존에 있던 내용을 모두 복사함.
  value: object.value + 1 // 새로운 값을 덮어 쓰게됨.
};
console.log(object === nextObjectGood); // 다른 객체이기 때문에 false

위의 예시코드로 기존 배열하고 복사해서 생성한 배열과 다른 배열이라는 것을 확인할 수 있다.

만약 불변성이 지켜지지 않으면, 객체 내부의 값이 바뀐것을 React.memo가 감지할 수 없다.
왜냐면 불변성이 지켜지지 않으면 기존 배열이 수정된거라서 비교 자체가 불가능하기 떄문.

전개연산자 ...로 복사하면 Sahllow copy가 된다.

위에서 배열이나 객체를 ... 전개연산자를 사용해서 복사했었는데, 이렇게 복사하는 경우에는 Shallow copy가 됨. 내부의 값이 완전히 복사되는게 아니라 가장 바깥쪽 값만 복사가 된다.
내부의 값이 객체 또는 배열이면 내부의 값을 따로 복사해줘야한다.

const todos = [{ id: 1, checked: true }, { id: 2, checked: true }];
const nextTodos = […todos];


nextTodos[0].checked = false;
console.log(todos[0] === nextTodos[0]); // 아직까지는 똑같은 객체를 가리키고 있기 때문에 true


// 이게 ...을 사용해서 복사한 경우임.
nextTodos[0] = {
  …nextTodos[0],
  checked: false
};
console.log(todos[0] === nextTodos[0]); // 새로운 객체를 할당해 주었기에 false

...을 사용해서 복사한 경우, nextTodos 배열의 첫번째 값에 checked를 false로 입력.
console.log에서 todos하고 nextTodos를 비교해보면 false라고 나옴.