[React] 불변성 (immutable)

1. 리액트는 상태가 불변해야한다 (immutable)

상태를 바꿔야할 때는 기존 데이터를 변형하는게 아니라 새로운 데이터로 변경해야 한다

2. 왜?

• state가 변경됐는지 알아야 하고
• 값을 수정할 때 바뀐 상태 값이 이전 값과 동일하다면 참조 값이 같아져서 비교할 수가 없다

3. 참조 값이 같아지는게 무슨 상관?

리액트에서는 상태가 변경되면 리랜더링을 하고, 리랜더링 할 때 값 자체를 참조하는게 아니라 참조 값으로 비교하기 때문이다
다시 말해 메모리 영역에 있는 값을 변경할 순 없고, 자바스크립트 엔진에 있는 콜스택에 있는 주소 값으로 비교한다

4. 그럼 참조는 어떻게 바꿔?

참조를 바꾸는 방법은 3가지 정도 있는 것 같다

• Object.assign()
• spread operator
• 외부 라이브버리 (ex. immer.js)

const obj = {
  a: 3
}

// Object.assign()
Object.assign({}, obj, { b: 2 });

// spread operator
{ ...obj, b: 2 };

그냥 평소에 상태 변경하듯 동일하게 변경하면 된다
특별한 이유가 아니라면 외부 라이브러리를 사용할 필요는 없을 것 같다