React에서 일괄 업데이트

React는 UI 구성 요소를 구축하기 위해 Facebook에서 만든 가장 인기 있는 JavaScript 프레임워크입니다. 이 프레임워크는 웹 개발, 모바일 앱 개발 및 데스크톱 앱 개발에 사용됩니다.

구성품

React는 자체 상태를 관리하는 구성 요소 기반 프레임워크이며 복잡한 UI를 만들기 위해 구성될 수 있습니다. 구성 요소 논리는 순전히 JavaScript로 작성됩니다. 다음은 헤더 구성 요소의 예입니다.

import React from 'react'; 

const Header = () => {
    return (
        <header>
            <h1>Brand Name</h1>
        </header>
    )
}

export default Header; 

상태 저장 구성 요소

또한 구성 요소는 this.state를 사용하여 액세스한 내부 상태 데이터를 유지할 수 있으며 구성 요소의 상태가 변경되면 render() 함수가 다시 호출됩니다. 이러한 구성 요소의 내부 데이터 변경은 this.setState() 기능을 통해 촉진됩니다.
상태 저장 구성 요소의 다음 예를 고려하십시오.

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            clickCount: 0
        };
    }

    handleClick = () => {
        let {clickCount} = this.state; 

        this.setState({clickCount: clickCount + 1}); 
    }

    render() {
        return (
            <>
                <button onClick={this.handleClick}>Click Me</button>
                <p>You clicked me {this.state.clickCount} times.</p>
            </>
        );
    }
}

버튼을 클릭할 때마다 onClick 이벤트 리스너가 활성화되어 내부 상태 데이터를 업데이트한 다음 페이지에 렌더링하기 위해 내부적으로 this.setState()를 호출합니다.

일괄 업데이트

구성 요소 상태가 업데이트될 때마다 페이지에서 업데이트된 구성 요소를 렌더링하기 위해 render() 메서드가 호출되어 React 애플리케이션의 성능이 저하되었습니다. 따라서 React는 성능을 향상시키기 위해 Batch Updating 메커니즘을 도입했습니다.

React는 일괄 처리를 사용하여 이벤트 핸들러 및 내장 후크 내에서 상태 업데이트를 그룹화합니다. 각 상태 업데이트에 대해 구성 요소가 다시 렌더링되는 것을 방지하고 애플리케이션 성능을 향상시킵니다. 따라서 얼마나 많은 상태 업데이트가 발생하든 React는 이를 일괄 처리하고 한 번만 다시 렌더링합니다.

별도의 상태 변경을 포함하는 다음 예를 고려하십시오.

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            clickCount: 0, 
            decrement: 0
        };
    }

    handleClick = () => {
        let {clickCount, decrement} = this.state; 

        this.setState({clickCount: clickCount + 1}); 

        this.setState({decrement: decrement - 1})
    }

    render() {
        console.log('Component Rendering'); 
        return (
            <>
                <button onClick={this.handleClick}>Click Me</button>
                <p>You clicked me {this.state.clickCount} times.</p>
            </>
        );
    }
}

두 가지 별도의 상태 변경이 있음에도 불구하고 구성 요소는 한 번만 렌더링되었습니다. 이는 React 18의 Automatic Batching 기능 때문입니다. 이 기능은 배치 업데이트가 어디에서 왔는지에 관계없이 자동으로 그룹화합니다.

결론

이 기능은 작은 크기의 웹 응용 프로그램에서는 별로 중요하지 않지만 응용 프로그램의 크기와 복잡성이 커짐에 따라 자동 일괄 처리를 통해 응용 프로그램의 성능이 크게 향상됩니다.