React) 불변성, State의 가장 큰 특징

React가 데이터 변경에 따라 렌더링을 변화시키는 과정은 다음과 같다.
1. Props를 전달받음
2. shouldComponentUpdate 함수 호출
3. 가상 DOM과 실제 DOM을 비교해 변경된 부분만 다시 렌더링

 

State의 특징은 '불변성'이다.

 가상 DOM과 실제 DOM을 비교하여 변경된 부분만 리렌더링한다고 할 때, 해당 컴포넌트가 달라졌음을 판단하는 것은 값을 가지고 판단을 한다. 만약, {key: 1, name: 이름1}의 형태인 데이터를 {key: 1, name: 이름2}로 변경했다고 해보자. 데이터는 결국 같은 객체이나, 그 내부의 속성이 변한 것으로 이 둘을 같은 객체, 같은 상태로 여겨 리렌더링해주지 않을 수 있다.
 불변성이란, 값을 변경시키지 않고 새로 만드는 것이다. 때문에 리액트에서는 반드시 불변성을 지켜서 State 관리를 해주어야 한다.