React 18의 자동 배치

일괄 처리는 React가 성능 향상을 위해 여러 상태 업데이트를 단일 재렌더링으로 그룹화하는 것입니다. React 17 및 이전 버전에서는 React 이벤트 핸들러 내부의 업데이트가 일괄 처리되었습니다. 그러나 약속, setTimeout, 기본 이벤트 핸들러 또는 기타 이벤트 내부의 업데이트는 기본적으로 React에서 일괄 처리되지 않았습니다.

그러나 React18에서는 자동 배칭이라는 향상된 배칭 버전을 소개합니다. 호출 위치에 관계없이 모든 상태 업데이트의 일괄 처리를 활성화합니다.

React 18과 함께 React 17 및 이전 버전의 일괄 처리 프로세스를 살펴보고 이전에 직면한 문제를 이해해 봅시다.

React 17 및 이전 버전의 문제

문제를 살펴보기 전에 React 17 및 이전 버전에서 일괄 처리가 작동하는 방식을 이해하겠습니다. 우리 앱에는 사용자 이름과 도시를 관리하는 두 가지 상태가 포함되어 있습니다. 버튼 클릭 시 onLoadUser 기능이 호출됩니다.



이 @StackBlitz에서 앱을 사용해 볼 수 있습니다. 버튼을 클릭하면 앱이 다시 렌더링될 때마다 콘솔 문이 표시됩니다.

브라우저 콘솔을 관찰하면 상태 변경 메시지가 두 상태 업데이트에 대해 한 번만 기록되는 것을 볼 수 있습니다. (추신: 앱이 처음으로 탑재될 때 초기 로그 문이 발생합니다.)

import React, { useState, useEffect } from 'react';

export default function App() {
  const [name, setName] = useState();
  const [city, setCity] = useState();

  // Sync Function call
  const onLoadUser = () => {
    setName('Rahul');
    setCity('Bangalore');
  };

  useEffect(() => {
    console.log(`UseEffect Called: userDeatils ${name} ${city}`);
  }, [name, city]);

  return (
    <div>
      <h1>Print User details</h1>
      <p>
        User Name: <strong>{name}</strong>
      </p>
      <p>
        City: <strong>{city}</strong>
      </p>
      <button onClick={onLoadUser}>Fetch user details</button>
    </div>
  );
}

이제 React가 상태 업데이트를 일괄 처리하고 구성 요소를 한 번만 다시 렌더링하는 것을 확인했습니다.
그러나 브라우저와 연결되지 않은 컨텍스트에서 상태 업데이트를 실행하면 어떻게 될까요?

예를 들어 비동기적으로 데이터를 로드하는 fetch() 호출을 고려하십시오.



이 예제를 실행한 후 브라우저 콘솔을 관찰하면 2개의 메시지가 표시됩니다. 이는 각 상태 업데이트에 대해 두 개의 개별 다시 렌더링이 발생함을 나타냅니다.

사용자 세부 정보를 가져오는 데 가짜 API가 사용되었습니다.

const onLoadUser = () => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then((res) => res.json())
      .then((data) => {
        setName(data.name);
        setCity(data.address.city);
      });
  };

여기에 단점이 있나요?

관찰한 바와 같이. 우리는 동기 및 비동기 함수를 사용하여 두 가지 다른 동작을 볼 수 있습니다. 성능 병목 현상입니다. 들어오는 상태가 많고 상당히 무거운 리렌더링을 하는 경우 여러 번의 리렌더링이 있을 수 있습니다.
이것이 React가 자동 배치를 도입한 이유입니다.

React18에서 일괄 처리는 어떻게 작동합니까?

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

React version should be 18

이 예제를 실행한 후 브라우저 콘솔을 관찰하면 두 개의 메시지가 표시됩니다. 이는 React가 호출된 위치에 관계없이 모든 상태 업데이트를 일괄 처리하므로 한 번의 재렌더링만 발생함을 나타냅니다.

결론

요약하면 반응 18은 여러 상태 업데이트를 포함하는 간단한 함수나 웹 API 및 setTimeout, 가져오기 또는 여러 상태 업데이트를 포함하는 약속과 같은 인터페이스에 관계없이 상태 업데이트를 일괄 처리합니다.

자동 배칭에 대해 자세히 알아보려면 Discussions here을 확인하십시오.

나는 웹에 대해 글을 씁니다. 당신은 나를 따라갈 수 있습니다. 게시물이 마음에 드셨다면 ❤️를 주세요!! 건배