https://leehwarang.github.io/2020/07/28/setState.html
React의 setState가 어떻게 동작하는지에 대해 설명하고 있습니다. 여기서 설명하는 주요 개념은 setState가 비동기적으로 동작한다는 것입니다.
JavaScript에서 비동기적(asynchronous)이라는 말은 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행한다는 의미입니다. React의 setState 메소드 역시 비동기적으로 동작합니다.
다시 말해, setState를 호출하면, React는 이를 '예약'하고, 모든 JavaScript 실행이 끝난 후에 일괄적으로 상태를 업데이트합니다. 이것이 setState의 비동기적인 특성입니다.
예를 들어, 아래의 코드를 보겠습니다.
this.setState({ counter: this.state.counter + 1 });
console.log(this.state.counter);setState를 호출하여 counter 상태를 증가시킨 후, 즉시 console.log를 통해 counter의 값을 출력하면, 우리가 기대하는 결과인 증가된 값이 출력되지 않습니다. 왜냐하면 setState가 비동기적으로 동작하기 때문에 상태가 업데이트 되기 전에 console.log가 먼저 실행되기 때문입니다.
setState에 함수를 전달하여 이 문제를 해결할 수 있습니다.
this.setState((prevState) => ({ counter: prevState.counter + 1 }));여기서 prevState는 상태 변경을 예약하기 전의 상태입니다. 이를 통해 여러번 setState를 호출하더라도 각 상태 변경이 정확히 이루어질 수 있습니다.
또한, setState가 끝난 후 특정 작업을 실행하려면, setState의 두 번째 파라미터로 콜백 함수를 전달할 수 있습니다.
this.setState({ counter: this.state.counter + 1 }, () => {
console.log(this.state.counter);
});이렇게 하면 setState로 인한 상태 변경이 모두 끝난 후에 console.log가 실행되어, 업데이트된 상태를 정확히 출력할 수 있습니다.
이해가 안 되는 부분이나 추가 질문이 있으시면 알려주세요!
