React에서 setState 메서드의 비동기 동작

상태를 유지하지 않고 동적 애플리케이션을 구축하는 것은 불가능하거나 적어도 매우 어렵습니다. 다행스럽게도 React 라이브러리의 모든 구성 요소는 자체 내부 상태를 가질 수 있습니다.

경험이 부족한 React 개발자는 종종 React에서 state 개체의 복잡한 동작을 이해하지 못합니다. 이 글에서 우리는 약간의 혼란을 없애고자 합니다.

React에서 setState() 메서드의 비동기 동작

많은 React 개발자는 setState() 메서드가 비동기식이라는 사실을 모릅니다. 애플리케이션에 setState() 메소드에 대한 여러 호출이 있는 경우 애플리케이션의 성능과 속도를 개선하기 위해 일괄 처리됩니다.

React 팀은 상태 변경이 애플리케이션을 다시 렌더링하기 위한 트리거가 될 수 있기 때문에 setState() 메서드를 비동기식으로 만들었습니다. 이로 인해 구성 요소에 setState() 메서드에 대한 별도의 여러 호출이 있는 경우 버그 및 무응답이 발생할 수 있습니다.

콜백 함수를 setState() 메서드에 인수로 전달

React에서 setState() 메서드는 상태 개체를 업데이트하는 데 사용됩니다. 많은 React 개발자는 하나 이상의 인수를 허용할 수 있다는 것을 모릅니다.

첫 번째 인수는 항상 우리가 새 상태에 있기를 원하는 객체입니다. 그러나 두 번째 인수는 상태가 업데이트된 직후에 실행되는 콜백 함수일 수 있습니다.

예를 살펴보겠습니다.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: "black" };
  }
  render() {
    return (
      <button
        onClick={() =>
          this.setState({ color: "red" }, () => {
            console.log("callback called");
          })
        }
      >
        Update the color
      </button>
    );
  }
}

onClick 이벤트 핸들러의 값은 이 메소드에 대한 호출입니다. 이 경우 첫 번째 인수는 기존 상태를 대체할 개체입니다.

두 번째 인수에서 콜백 함수는 상태를 업데이트한 직후에 실행됩니다.

이 라이브 CodeSandbox 데모로 이동할 수 있습니다. 콘솔을 열면 버튼을 클릭하면 'callback called' 문자열이 콘솔에 출력되는 것을 볼 수 있습니다.

이 기능은 상태를 업데이트한 직후 특정 작업을 수행하려는 경우에 유용합니다. 기술적으로는 setState() 메서드에 대한 여러 호출을 연결하여 개체 상태의 여러 속성을 한 번에 업데이트할 수 있습니다. 그러나 그렇게 하는 더 좋은 방법이 있습니다.

또한 하나의 상태 속성이 다른 속성 이후에 업데이트되도록 하려면 다음을 수행할 수 있습니다.

this.setState({color: 'red'}, () => setState{color: 'red', active: true})

이 경우 React는 먼저 현재 상태 객체를 첫 번째 인수인 객체({color: "red"})로 대체합니다. 이 작업이 완료되면 콜백 함수를 실행하여 상태에 속성을 하나 더 추가합니다.

한 번에 여러 상태 속성 업데이트

한 번에 여러 상태 속성을 업데이트해야 하는 경우 setState() 메서드를 한 번 호출하면 됩니다.

이전 예제에서 한 번의 setState() 호출에서 color 상태 속성의 값을 업데이트하고 active 상태 속성을 추가하는 것이 더 쉽습니다.

this.setState({color: 'red', active: true})