불변성

불변성 : 기존 값을 직접 수정하지 않으면서 새로운 값을 만들어내는 것을 의미
React의 컴포넌트에서 상태의 불변성을 유지하는 것은 매우 중요하다.

주로 전개 연산자를 사용하여 배열이나 객체의 값을 복사한다.

 
불변성 유지 방법 
: 주로 전개 연산자를 사용하여 배열이나 객체의 값을 복사

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

const nextArr1 = arr; // 같은 배열을 가리키도록 할당 
const nextArr2 = [...arr]; // 새로운 배열에 값을 모두 복사 

nextArr1[0] = 10; 
console.log(arr === nextArr1); // true, 서로 같은 배열 

nextArr2[0] = 10; 
console.log(arr === nextArr2); // false, 서로 다른 배열

주의사항 
: 전개 연산자는 얕은 복사가 이루어져서 가장 바깥쪽 값만 복사

- 객체 안에 객체가 있는 경우에 대해 다음과 같이 전개 연산자를 사용하면 불변성이 유지되지 않는다.
- 즉, 내부에 객체나 배열이 있는 경우엔 해당 객체나 배열에 대해서도 값을 복사해주어야 불변성이 유지된다.

const obj = { 
  checked: false, 
  innerObj: { checked: false } 
}; 

const nextObj = { 
  ...obj, 
  innerObj: { 
    …obj.innerObj, 
    checked: true 
  } 
}; 

console.log(obj.innerObj.checked === nextObj.innerObj.checked); // false