React 팁 — Async 및 setState

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다.

이 기사에서는 setState의 비동기 특성과 여러 setState 호출을 순차적으로 실행하기 위해 코드를 작성하는 방법을 살펴보겠습니다.

setState의 비동기 특성

setState 메소드는 컴포넌트의 내부 상태를 업데이트하는 메소드입니다. 일괄 처리되는 비동기식 메서드입니다. 이는 구성 요소가 새 상태로 다시 렌더링되기 전에 여러 호출setState이 일괄 처리됨을 의미합니다.
setState 상태를 즉시 변경하지 않고 보류 상태 트랜잭션을 생성합니다. 즉, 호출state 직후에 setState에 액세스하면 이전 값을 반환할 수 있습니다.
setState 메서드는 최대 2개의 인수를 사용합니다. 우리는 보통 하나만 통과합니다. 첫 번째 인수는 상태를 업데이트하는 데 사용되는 객체 또는 콜백일 수 있습니다.

두 번째 인수는 setState가 실행된 후에 항상 실행되는 함수입니다. 예를 들어 다음과 같이 두 번째 인수에 콜백을 전달할 수 있습니다.

import React from "react";
`
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
`
  update() {
    this.setState(
      ({ count }) => ({
        count: count + 1
      }),
      () => {
        this.setState(({ count }) => ({
          count: count + 2
        }));
      }
    );
  }
`
  render() {
    return (
      <>
        <button onClick={this.update.bind(this)}>Increment</button>
        <p>{this.state.count}</p>
      </>
    );
  }
}
`
export default App;

위의 코드에는 다음이 있습니다.

update() {
  this.setState(
    ({ count }) => ({
      count: count + 1
    }),
    () => {
      this.setState(({ count }) => ({
        count: count + 2
      }));
    }
  );
}

setState를 한 번 호출한 다음 콜백에서 setState를 다시 호출합니다. 이렇게 하면 하나가 다른 하나를 실행하게 됩니다.

따라서 Increment를 클릭하면 count 상태가 매번 3씩 증가합니다.

setState는 객체 또는 함수를 사용합니다.

위의 코드에서 볼 수 있듯이 setState는 이전 상태를 기반으로 새 상태를 반환하는 콜백을 받을 수 있습니다. 이는 이전 상태를 기반으로 하는 상태를 업데이트하는 데 유용합니다.

위의 코드에서 새count는 이전count을 기반으로 하므로 개체를 전달하는 것보다 콜백을 전달하는 것이 콜백으로 전달될 때 원래 상태가 가장 최신 상태임을 보장할 수 있으므로 개체를 전달하는 것보다 더 적절합니다. 매개변수.

또한 props가 있는 두 번째 매개변수로 props 매개변수를 사용합니다. 예를 들어 다음과 같이 사용할 수 있습니다.

import React from "react";
`
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
`
  update() {
    this.setState(({ count }, { incrementVal }) => ({
      count: incrementVal + count
    }));
  }
`
  render() {
    return (
      <>
        <button onClick={this.update.bind(this)}>Increment</button>
        <p>{this.state.count}</p>
      </>
    );
  }
}
`
export default function App() {
  return <Counter incrementVal={5} />;
}

위의 코드에는 Counter 구성 요소가 있으며 이전 예제에서와 같이 update 메서드가 있습니다. 그러나 이 setState 메서드는 두 번째 매개변수가 있는 콜백을 사용합니다. props 객체가 있습니다.

구조화 할당 구문을 통해 위에서 했던 것처럼 prop 속성 값을 얻을 수 있습니다. 또한 점 또는 대괄호 표기법을 사용하여 다른 JavaScript 객체 속성과 마찬가지로 prop 객체의 속성에 액세스할 수 있습니다.

따라서 우리는 다음을 가지고 있습니다.

<Counter incrementVal={5} />

App  에서 증가 버튼을 클릭하면 count의 Counter 상태가 5만큼 업데이트됩니다.

우리가 전달하는 가장 일반적인 엔티티setState는 아마도 객체일 것입니다. 변경하려는 상태 속성이 있는 객체를 전달하기만 하면 됩니다. 포함되지 않은 항목은 그대로 유지됩니다.

예를 들어 다음과 같이 작성합니다.

import React from "react";
`
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0, foo: "foo" };
  }
`
  update() {
    this.setState({ count: this.state.count + 1 });
  }
`
  render() {
    return (
      <>
        <button onClick={this.update.bind(this)}>Increment</button>
        <p>{this.state.count}</p>
        <p>{this.state.foo}</p>
      </>
    );
  }
}
`
export default function App() {
  return <Counter />;
}

그러면 this.state.foo는 'foo'의 this.setstate가 실행된 후에도 update 값을 가집니다.

따라서 Increment 버튼을 클릭하면 아무리 많이 클릭해도 'foo'가 표시되는 것을 볼 수 있습니다.

결론

setState 호출이 항상 순차적인 것은 아닙니다. 일괄 처리는 때때로 React에 의해 제어되지 않을 수 있습니다. 따라서 여러 setState 호출이 항상 순차적으로 실행되도록 하려면 setState 의 두 번째 인수로 전달된 콜백에서 두 번째setState를 실행해야 합니다.

또한 setState는 이전 state와 props 객체를 각각 첫 번째와 두 번째 매개변수로 사용하는 객체나 함수를 취할 수 있습니다.