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

❓왜 state를 직접 수정하면 안되는 걸까?

❕ 1. setState는 비동기 API이다.

동시에 여러 setState를 효율적으로 처리할 수 있기 위함이다.

비동기 특성으로 인해 예상치 못한 버그가 발생할 수 있다.

• state 값이 변경이 되면 setState는 리액트에 업데이트 요청을 한 뒤 다음 코드를 실행시킨다. State를 직접 수정하면서 여러번 상태를 업데이트 하는 경우 이전 업데이트 내용이 다음 업데이트 내용으로 덮어 쓰여질 수 있다.

예상치 못한 오류를 피하기 위해 오브젝트는 늘 불변성을 유지하는 것이 좋다.
state도 마찬가지!

❕ 2. PureComponent에서 정상적으로 동작 하지 않는다

PureComponent

현재 컴포넌트가 가지고 있는 상태와 (this.state), 업데이트 해야 하는 새로운 상태 (setState 함수의 인자로 전달된 새로운 오브젝트)의 레퍼런스를 비교해서 업데이트가 필요한 경우 해당 컴포넌트의 render 함수를 호출한다.

this.state 오브젝트를 직접 수정하면 setState함수에 동일한 오브젝트를 전달하기 때문에, 비교 대상의 레퍼런스가 동일하므로 리액트는 render 함수를 호출해 업데이트 하지 않는다.

❕ 3. state값을 계산해 업데이트하는 경우

setState(prevState => newState)
이전 state 값을 받아서 그걸로 업데이트 되는 state값을 만드는 arrow 함수를 전달할 수 있는 함수 호출을 하는 것이 좋다.

setState 함수 종류

1. setState(newState) // 새로운 state 오브젝트를 인자로 바로 받는 함수
2. setState(prevState => { return newState; }) // 이전 state를 받아 계산한 다음 새로운 state를 리턴하는 함수를 인자로 받는 함수