state를 직접 변경하지 않고 setState를 사용하는 이유

불변성(immutable)을 유지하기 위함이다.

컴포넌트는 현재의 state와 setState를 비교해서 업데이트가 필요한 경우에만 render함수를 호출하게 되는데, state를 직접 수정하게 되면 React가 render함수를 호출하지 않아 상태 변경이 일어나도 렌터링이 일어나지 않을 수 있다. 상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 한다.

• 새로운 state를 생성하게 되면 React는 변경된 부분을 확인하고 변경된 부분을 찾아내서 다시 렌더링하는 작업을 하게 된다. 바닐라 JavaScript나 제이퀘리는 다시 렌더링이 될 수 있게 함수나 코드를 작성해야 하지만 React는 자동적으로 변경된 부분을 찾아서 렌더링을 해주는 변리한 장점이 있다.

• React를 사용하다보면 렌더링은 React Element tree를 만드는 것과 비슷하다. state나 props가 갱신되면 render()함수는 새로운 React Element tree를 반환하게 된다. 처음 렌더링 된 트리와 변경된 트리의 key props를 통해 어떤 자식 element가 변경되지 않아야 할지 확인해주고 직접 DOM에 접근해서 변경되어야 할 부분만 찾아서 변경이 되어 시간 복잡도가 줄어드는 효과가 있다.