state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.

 

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

1. setState는 비동기적으로 동작하기 때문에 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 내용에 덮어 쓰여질 수가 있어 예상치 못한 곳에서 버그가 발생 할 수 있습니다.
2. PureComponent에서 동작하지 않습니다. PureComponent는 this.state와 setState를 비교해 업데이트가 필요한 경우에만 render함수를 호출해 줍니다. 이때, state를 직접 수정하게되면 기존의 this.state와 setState가 동일하므로 리액트는 render함수를 호출하지 않습니다.

결론, state는 꼭 불변성을 유지하도록 직접 수정하지 말자!
state의 object를 직접 수정하지 않고 새로운 object를 만들어 주려면 object의 할당과 spread 연산자를 알아두면 좋습니다. (map함수도, filter함수도 새로운 배열을 반환하기때문에 이럴때 사용하면 좋습니다.)

---

Reference
https://stackoverflow.com/questions/53098873/why-does-react-have-to-use-setstate-for-state-update
https://velog.io/@dev_cecy/React-State%EB%A5%BC-%EC%A7%81%EC%A0%91-%EC%88%98%EC%A0%95%ED%95%98%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0#:~:text=setState%EB%8A%94%20%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81%EC%9C%BC%EB%A1%9C,%EA%B0%80%20%EB%B0%9C%EC%83%9D%20%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8B%A4.