왜 react의 setState 메소드를 호출하면 상태(state)가 즉시 변경되지 않을까요?

나는 reactjs 문서의 Forms 섹션을 읽고 이 코드를 사용하여 onChange 사용법을 보여주려고 시도했습니다 (JSBIN).

var React= require('react');
var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: 초기값
        };
    },
    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);
    },
    render: function() {
        return (
            <input type=text value={this.state.value} onChange={this.handleChange}/>
        );
    }
});
React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

브라우저에서 <input/> 값이 업데이트되면, handleChange 콜백 내부의 두 번째 console.log는 첫 번째 console.log와 동일한 value를 출력합니다. 왜 handleChange 콜백의 범위에서 this.setState({value: event.target.value})의 결과를 볼 수 없는 것일까요?

답변 1

React의 문서에서:

setState()은 즉시 this.state를 변경하지 않고 대기 중인 상태 전환을 생성합니다. 이 메소드를 호출한 후에 this.state에 접근하면 기존 값을 반환할 수 있습니다. setState에 대한 동기화 작업은 보장되지 않으며 성능 향상을 위해 호출이 일괄 처리될 수 있습니다.

상태 변경이 발생한 후에 함수가 실행되길 원한다면, 콜백으로 전달하세요.

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

답변 2

리액트의 setState 메소드를 호출하면 왜 상태(state)를 즉시 변경하지 않을까요?
리액트는 빠른 속도와 효율적인 업데이트를 위해 가상 DOM(Virtual DOM)을 사용합니다. 이 가상 DOM은 DOM(Document Object Model)과 비슷하지만, 실제 DOM에 즉시 반영되지 않는 상태를 유지합니다. 리액트의 setState 메소드를 호출하면, 리액트는 상태 변경을 가상 DOM에 적용합니다. 실제 DOM에 반영하기 전에 이 가상 DOM과 이전의 가상 DOM을 비교하여 변경된 부분을 최소한으로 찾아내고, 그 부분만을 실제 DOM에 업데이트합니다. 이를 가상 DOM 재조정(Virtual DOM Reconciliation)이라고 합니다.
왜 이런 추가적인 단계가 필요한 걸까요? 이전에는 개발자들이 수동으로 실제 DOM을 직접 조작하여 UI를 업데이트했습니다. 다양한 부분에서 UI를 직접 조작하면 속도 저하와 메모리 부족 문제가 발생할 수 있었습니다. 이에 대한 대안으로 리액트는 변경 사항을 최소화하고 최적의 업데이트를 위해 가상 DOM을 도입했습니다.
리액트에서 상태를 즉시 변경하지 않는 이유는, 여러 setState 호출이 동시에 발생할 수 있으며, 각각의 업데이트를 즉시 실제 DOM에 반영한다면 비효율적일 수 있기 때문입니다. 대신에 상태 변경은 모아두고, 한 번에 업데이트하여 DOM 조작을 최소화하고 효율적인 업데이트를 수행합니다.
여러 setState 호출을 한 번에 처리하는 것은 리액트의 성능 향상을 위해 중요한 부분입니다. 리액트는 변경 사항을 최소화하면서도 상태 업데이트를 효율적으로 처리하므로, 사용자 경험을 향상시킬 수 있습니다. 이는 사이트의 검색 엔진 최적화를 위해 중요한 요소입니다. 리액트를 사용하면 웹앱의 속도가 빨라지고, 사용자들이 더 나은 경험을 누릴 수 있습니다. 빠른 웹사이트는 검색 엔진에서도 좋은 평가를 받을 가능성이 높습니다.
결론적으로, 리액트의 setState 메소드가 상태를 즉시 변경하지 않고 추가적인 단계를 거치는 이유는 가상 DOM을 통해 효율적인 업데이트를 수행하기 위함입니다. 이를 통해 속도 향상과 사용자 경험 개선을 이룰 수 있으며, 이는 검색 엔진 최적화에도 긍정적인 영향을 미칩니다.