React에서 일괄 업데이트

일괄 업데이트란 무엇입니까?

React에서 여러 변경 상태를 그룹화할 때 일괄 처리는 성능 향상을 위해 단일 업데이트로 그룹화됩니다.

상태를 변경할 때마다 React는 페이지의 구성 요소를 렌더링합니다.
주어진 예제에서 상태를 3번 변경하지만 렌더링은 한 번만 발생합니다.

import React from "react";
class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: '',
            likes: '',
            product: ''
        };
    }
    handleClick = () => {
        this.setState({
            name:"john",
        })
        this.setState({
            likes:"cricket",
        })
        this.setState({
            product:"bat"
        })

    }

    render() {
        console.log("rendering");

        return (
            <div className="App">
                <div>
                    <button onClick={this.handleClick}>Next</button>
                </div>
            </div>
        );
    }
}
export default App;

여기서 일어나는 일은 버튼을 누를 때 this.setSate를 사용하여 상태가 변경되고 반응이 이러한 모든 변경 사항을 일괄 처리하고 한 번에 렌더링하는 것입니다.

이전 버전의 React에서는 일괄 처리가 이벤트 핸들러에 대해서만 수행되었습니다.

React v18은 모든 위치에서 수행된 상태 업데이트가 기본적으로 일괄 처리되도록 합니다. 이렇게 하면 네이티브 이벤트 핸들러, 비동기 작업, 시간 초과 및 간격을 포함한 상태 업데이트가 일괄 처리됩니다.

이 예에서 React v17의 경우 React는 구성 요소의 상태를 변경하므로 console.log(this.state) React 17을 볼 때 { counter1: 1, counter2: 0 } 상태가 첫 번째 상태 변경에 대해 렌더링되고 렌더링되었기 때문입니다.

import React from "react";
class App extends React.Component {
    state = {
        counter1: 0,
        counter2: 0
    }

    handleClick = () => {
        setTimeout(() => {
            this.setState(({ counter1 }) => ({ counter1: counter1 + 1 }));
            console.log(this.state);
            //React 17 : { counter1: 1, counter2: 0 }
            //React 18 with createRoot : { counter1: 0, counter2: 0 } 
            this.setState(({ counter2 }) => ({ counter2: counter2 + 1 }));
        });
    };

    render() {
        console.log('Rerendered');
        console.log(this.state);
        // {counter1: 1, counter2: 1}
        return (
            <div className='App'>
                <button onClick={this.handleClick}>Click me</button>
            </div>
        )
    }
}

export default App;

반응 v18

참조

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

https://blog.logrocket.com/simplifying-state-management-in-react-apps-with-batched-updates/

https://blog.bitsrc.io/automatic-batching-in-react-18-what-you-should-know-d50141dc096e#:~:text=React%20uses%20batching%20to%20group,support%20batching%20for%20browser%20events .

https://blog.saeloun.com/2021/07/22/react-automatic-batching.html