그룹스터디 [React : class형에서 setState를 사용하는 이유]

정리

state는 immutable(불변성)을 유지해야하기 때문입니다.

컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데 state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다.

(예상치 못한 버그가 발생할 수 있음.)

useState를 사용하는 이유와 비슷함

state란?

 - 렌더링 결과물에 영향을 주는 정보를 갖고 있는 일반 JavaScript 객체입니다.

 - (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

 

setState란?

 - 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.

 - state의 immutable(불변성)을 유지하기 위해 사용됩니다.

 

state를 직접 수정하면 안되는 이유

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

즉, state는 꼭 불변성을 유지하도록 직접 수정하지 말자!

 

 

 

++reference

https://stackoverflow.com/questions/53098873/why-does-react-have-to-use-setstate-for-state-update

Why does React have to use setState for state update?

https://ko.reactjs.org/docs/faq-state.html

컴포넌트 State – React