React - setState()

setState()

setState(updater, [callback])

setState()란, React docs에 따르면

state 객체에 대한 업데이트를 실행

으로 정의되어 있다.

React에는 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값인 state가 존재한다.
state를 변경하기 위해서는 반드시 setState()를 사용해야한다.

이때, state가 변경이되면 Component는 다시 랜더링된다.

특징

Docs에서, setState()는 Component를 항상 즉각적으로 갱신하지는 않는다라고 명시되어있다.

setState()를 호출한 후에 바로 this.state객체를 호출하면, 문제가 발생할 수도 있다.
ex)한 단계 늦게 불려지는 오류.

이러한 오류를 해결하기 위해서는

componentDidUpdate 또는 setState의 콜백(setState(updater, callback))을 사용해야한다.

Parameter

1. updater

(state, props) => stateChange

updater로 전달된 state와 props는 최신값임이 보장된다.

parameter state는 변경사항이 적용되는 시점에 this.state에 대한 참조이기 때문에 직접 변경하는 것은 불가능하다.
변경을 위해서는 parameter로 전달된 state와 props를 기반으로 새로운 객체를 만들어서 변경사항을 적용해야한다.

2. [callback]

두번째 parameter는 setState()의 실행이 완료되고 Component가 다시 렌더링된 뒤에 실행될 함수에 대한 콜백으로, 생략할 수 있다.

이러한 방식의 실행에는 componentDidUpdate()의 사용이 권장된다.