배경

• 아래의 코드는 React 공식 문서에 나와 있는 예시임
• 아래의 경우처럼, 이미 존재하는 state 값(squares 배열) 내의 squares[i]로 직접 접근하여 업데이트 하지 않고, slice()로 전체 복사본을 만든 다음, 업데이트된 부분을 반영시킨 후, 전체를 갈아끼는 방식을 취함

...
handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }
...

React에서 왜 불변성이 중요할까?

1. 데이터 변경 이력을 효과적으로 관리 용이

: 변경된 히스토리를 추적하고 돌아가는 등 데이터 변경 이력의 재사용 유리

2. 객체의 변화를 감지 용이

: 직접 객체에 접근해서 일부분을 수정하게 되면, 해당 객체의 식별자 및 값들의 묶음 주소를 가진 부분은 변화가 없어 추적이 어려움
: 그러나, 객체 자체를 새롭게 생성하여 갈아끼는 방식은 객체 자체의 식별자가 직접적으로 변경되므로 추적이 용이 => SPA의 특징 상 데이터 변화를 감지하는 것은 랜더링과 연관되어 있어 매우 중요

3. 성능 최적화에 유리

: 2번과 연결되어 효과적으로 성능 개선에 유리