이걸 쓰면 어떻게 되는 거야?react 구성 요소에서 setState를 여러 번 사용하시겠습니까?

이걸 쓰면 어떻게 되는 거야?react 구성 요소에서 setState를 여러 번 사용하시겠습니까?

이걸 쓰면 어떻게 되는지 확인하고 싶었어요.set 스테이트를 여러 번 합니다(논의를 위해 2회).컴포넌트가 두 번 렌더링되는 줄 알았는데 한 번 렌더링된 것 같습니다.또 다른 기대는 setState에 대한 두 번째 콜이 첫 번째 콜보다 우선될 수 있다는 것이었습니다만, 예상하셨던 대로 잘 작동했습니다.

JSfiddle 링크

var Hello = React.createClass({
  render: function() {
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <CheckBox />
      </div>
    );
  }
});

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      alex: 0
    };
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
    this.setState({
      alex: 5
    });
  },

  render: function() {
    alert('render');
    return (
      <div>
        <label htmlFor="alex">Alex</label>
        <input type="checkbox" onChange={this.handleChange} name="alex" />
        <div>{this.state.alex}</div>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

보시다시피 렌더마다 '렌더'라는 알림이 표시됩니다.

왜 제대로 작동했는지 설명해주실 수 있나요?

이벤트 핸들러 및 라이프 사이클 메서드에서 발생하는 배치 상태 업데이트에 대응합니다.따라서, 에서 상태를 여러 번 갱신하는 경우<div onClick />핸들러, React는 이벤트 처리가 완료될 때까지 기다렸다가 다시 렌더링합니다.

이 기능은 리액트 제어된 모의 이벤트 핸들러 및 라이프 사이클 방식에서만 작동합니다.상태 업데이트는 AJAX 및setTimeout예를 들어 이벤트 핸들러입니다.

갱신하다

React v18.0 릴리스에서는 비React 이벤트(약속, set Timeout 등) 내의 상태 업데이트도 기본적으로 일괄 처리됩니다.

참조 - https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching

setState() 메서드는 컴포넌트 상태를 즉시 업데이트하지 않고 나중에 처리하기 위해 큐에 업데이트를 넣습니다.React는 여러 업데이트 요청을 일괄 처리하여 렌더링을 보다 효율적으로 수행할 수 있습니다.따라서 컴포넌트의 이전 상태를 기반으로 상태를 업데이트하려고 할 때는 특별한 주의가 필요합니다.

예를 들어, 다음 코드는 4회 호출된 상태 값 Atribute를 1만 증가시킵니다.

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

상태를 갱신한 후에 사용하려면 callback 인수의 모든 로직을 수행합니다.

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

setState(updater, [callback]) 메서드는 업데이트 함수를 첫 번째 인수로 사용하여 이전 상태와 속성을 기반으로 상태를 업데이트할 수 있습니다.업데이트 프로그램 함수의 반환 값이 이전 구성 요소 상태와 얄팍하게 병합됩니다.이 메서드는 상태를 비동기적으로 업데이트하기 때문에 상태 갱신이 완료되면 콜백을 호출하는 옵션이 있습니다.

예:

this.setState((prevState, props) => { 
return {attribute:"value"}
})

다음은 이전 상태를 기반으로 상태를 업데이트하는 예를 보여 줍니다.

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }

언급URL : https://stackoverflow.com/questions/33613728/what-happens-when-using-this-setstate-multiple-times-in-react-component