TL;DR

• React의 Props와 State는 모두 불변성(immutability)을 유지하는 것이 필요하다.

이유

• 불변성을 유지하면서 상태를 다루게 되면 이 상태를 다루는 함수 내부에서 side effect가 발생할 염려가 줄어든다.
• side effect라고 하면 함수 내부에서 이 상태를 직접 변경할 수 없어서 추적이 용이해지기 때문

다른 장점

• shouldComponentUpdate, useEffect의 역할이 컴포넌트가 불필요하게 자주 리렌더링 되는 것을 막는 역할을 한다.
• 이때 이전 상태와 다음 상태를 비교할때 객체의 레퍼런스만 비교하는(shallow compare) 값싼 연산으로 리렌더링 여부를 결정하는데 큰 도움이 됩니다.
  • 객체의 레퍼런스틑 스트링 타입으로 구성되어 있기 때문
  • shallow compare를 하지 않는다면 상태를 관리하는 객체를 nested한 데이터를 비교하려면 순회를 하면서 비교 해야 할때 비용이 많이 들게 됩니다. 즉, 성능에 영향이 미친다.
• 참고
  • Using State Correctly
  • React state가 불변이어야 하는 이유

불변성을 지키는것과 React의 관계에 대한 나의 생각

• 불변성을 지키 지 않으면 ⭐️mutable한 객체가 변경될때 언제 어디서 변경되는지 디버깅하기란 쉽지 않다.
• 그래서 react는 state, props가 변경되는것을 불변성으로 규칙을 정해두고
  • ⭐️메모리가 변경이 되면 그때마다 상태가 업데이트 됐다고 인지하고 상태 업데이트를 진행하는 개념 이라고 볼 수 있겠다.
• 그래서 React를 보면 setState function(useState의 반환 배열의 두번째 요소 함수)을 이용해서 state를 업데이트 시킬때 새로운 새로운 값을 return 시킨다. → ⭐️setState hook이 state값을 immutable 하게 관리하고 있는 의미이다.
• props, state는 불변객체(immutable) 객체이다
• state 불변객체로 관리했다면 this.state에 직접 연결된 데이터만 단순 비교하면 컴포넌트의 상탯값이 변경됐는지 알 수 있다.

  • 수정가능한 객체로 관리했다면 상태값이 변경됐는지 알 수 있는 방법은 하위 모든 depth property를 모두 비교해야한다.

  • 불변객체로 관리 했다면 한번의 비교로 비교가 가능하다.

    class Todos exteds. React.component {
    	state = { todos: {title: 'fix bug', priority: 'hight'} }
    
    	shouldComponentUpdate(nextProps, nextState){
    		prevState.todos !== nextState.todos
    	}
    }