React 18 킬러 기능

아마도 React v18.0 릴리스에 대해 이미 들었을 것입니다.
릴리스의 새로운 킬러 기능을 소개하고 싶습니다.

이 예를 살펴보겠습니다.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

async function fetchSomething() {
  await new Promise((res, rej) => {
    setTimeout(res, 100);
  });
}

function Counter({ count, flag }) {
  useEffect(() => {
    console.log("render Counter");
  });
  return <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    console.log("render App");
  });

  function handleClick() {
    setCount((c) => c + 1);
    setFlag((f) => !f);
  }

  return (
    <div id="ttt">
      <button id="b" onClick={handleClick}>
        Next
      </button>
      <Counter count={count} flag={flag} />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#container"));

하나의 버튼 카운터. 그리고 handleClick 핸들러는 플래그 및 카운트에 대한 상태를 설정합니다.

React는 스마트 라이브러리이며 처리기에서 상태를 두 번 업데이트하더라도 의도적으로 구성 요소를 두 번 렌더링하지 않습니다. React가 이벤트 핸들러를 일괄 처리하기 때문입니다.

하지만 handleClick 기능을 약간 변경하고 여기에 비동기 마법을 추가하면 어떻게 될까요?

async function fetchSomething() {
  await new Promise((res, rej) => {
    setTimeout(res, 100);
  });
}

function handleClick() {
    fetchSomething().then(() => {
      setCount((c) => c + 1); // Causes a re-render
      setFlag((f) => !f); // Causes a re-render
    });
}

그리고 코드를 다시 실행하면 아마도 이중 렌더링 구성 요소를 발견했을 것입니다useEffect는 콘솔에서 알려줍니다. 이는 React가 상태 변경을 일괄 처리할 수 없기 때문입니다. 이유가 무엇입니까? 비동기 핸들러는 이벤트 도중이 아니라 콜백의 이벤트 후에 실행됩니다. 분명히 모든 비동기 작업은 논블로킹이며 메인 스택 이후에 실행됩니다.

React 18에서는 이 문제가 해결되었습니다. 코드에서 ReactDOM.render를 ReactDOM.createRoot로 바꾸면 됩니다.

ReactDOM.createRoot(document.querySelector("#container")).render(<App />);

createRoot는 동시 모드를 활성화합니다. 이제 애플리케이션이 더 생산적일 수 있으며 하나의 이벤트 핸들러 내에서 각 상태가 변경된 후 다시 렌더링을 트리거하지 않습니다.
이것이 자동 배치 렌더링 기능이 작동하는 방식입니다.

유용한 콘텐츠를 가져왔으면 좋겠습니다.

더 많은 콘텐츠를 보고 싶다면 🐦에서 저를 팔로우하세요.