React 18의 새로운 기능

React 18과 함께 몇 가지 흥미로운 새로운 개선 사항이 출시되었습니다. 1년 전에 React 18이 발표되었을 때 팀은 점진적인 채택 전략을 약속했습니다. 이제 1년 후, 이것이 바로 그들이 한 일이며 앱을 최신 버전으로 업그레이드할 수 있습니다.

React 18은 사용 방법에 따라 몇 가지 중요한 변경 사항이 있습니다. 그러나 대체로 기본적으로 더 많은 일괄 처리를 포함하여 즉시 사용 가능한 성능 향상을 가져오므로 응용 프로그램 또는 라이브러리 코드에서 업데이트를 수동으로 일괄 처리할 필요가 없습니다.

어떤 사람들에게는 이것이 그들의 귀에 들리는 음악이고 다른 사람들에게는 더 설득력이 필요할 수 있습니다. 이제 Facebook 팀이 가져온 가장 중요한 새로운 변경 사항에 대해 자세히 살펴보겠습니다.

React 18의 주요 변경 사항
브레이킹 체인지가 없는 주요 릴리스는 무엇입니까? 음, 이 버전의 React는 약간 다르며, 잠시 후에 그 이유를 알게 될 것입니다. 변경 사항 중 하나는 다음과 같이 render를 createRoot로 변경하는 것입니다.

// Before
import { render } from "react-dom";

const container = document.getElementById("app");
render(<App tab="home" />, container);

// After
import { createRoot } from "react-dom/client";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App tab="home" />);

createRoot는 React 18의 동시 기능을 활성화합니다. 이를 사용하지 않으면 앱이 React 17에 있는 것처럼 작동하고 즉시 사용 가능한 최적화를 경험할 수 없습니다. 따라서 지금은 createRoot 대신 렌더링을 계속 사용하는 경우 지원 중단 알림이 표시됩니다.

새로운 동시 기능이 생산 성능을 향상시키는지 실험하고 확인할 수 있는 좋은 기회입니다. 한 변형에는 렌더링이 있고 다른 변형에는 createRoot를 사용하는 실험을 실행할 수 있습니다. 또한 새 API로 전환해도 코드가 손상되지 않습니다. 앱을 손상시킬 가능성 없이 점진적으로 createRoot로 전환할 수 있습니다.

앱을 제대로 이전하려면 엄격 모드를 사용 설정해 보세요. Strict 모드는 개발 중인 구성 요소에 어떤 일이 일어나고 있는지 알려주고 콘솔의 모든 불규칙성을 출력합니다. 엄격 모드를 활성화해도 프로덕션 빌드에는 영향을 미치지 않습니다. 다음과 같이 앱에서 수행할 수 있습니다.

import React from "react";
import { createRoot } from "react-dom/client";

function App() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <Content />
          <SignUpForm />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

또한 하이드레이션이 포함된 서버 측 렌더링에 하이드레이트를 사용하는 경우 hydrateRoot로 업그레이드할 수 있습니다.

// Before
import { hydrate } from "react-dom";
const container = document.getElementById("app");
hydrate(<App tab="home" />, container);

// After
import { hydrateRoot } from "react-dom/client";
const container = document.getElementById("app");
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.

React 18의 자동 배치
React 18은 자동 일괄 처리를 제공합니다. 혼란스럽게 들릴 수 있습니다. '배칭이 무엇인가요?'라고 물을 수 있습니다. 걱정하지 마세요. 예를 살펴보겠습니다.

// Before: only React events were batched
setTimeout(() => {
  setSize((oldSize) => oldSize + 1);
  setOpen((oldOpen) => !oldOpen);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched
setTimeout(() => {
  setSize((oldSize) => oldSize + 1);
  setOpen((oldOpen) => !oldOpen);
  // React will only re-render once at the end (that is batching)
}, 1000);

자동 일괄 처리는 React가 이제 구성 요소 내부에서 수행하는 업데이트를 일괄 처리한다는 의미입니다. 일괄 처리는 구성 요소의 불필요한 렌더링을 방지합니다.

React 17에서는 구성 요소의 상태를 두 번 변경하면 구성 요소가 두 번 다시 렌더링됩니다. 이제 React 18에서는 두 업데이트가 일괄 처리되고 구성 요소가 한 번만 렌더링됩니다. 이는 render 대신 createRoot를 사용하는 경우에만 해당됩니다.
결론: React 18은 크게 개선되었습니다.
React 팀에서 React 18에 대한 새롭고 흥미로운 많은 발표가 있었습니다. 요약하면 다음과 같습니다.

React.render는 React.createRoot로 교체해야 한다고 경고합니다.
ReactDOM.hydrate는 React.hydrateRoot에 대해서도 동일한 정보를 제공합니다.
자동 일괄 처리는 상태 업데이트를 일괄 처리하고 함께 수행하므로 다시 렌더링 횟수가 줄어듭니다.
전환을 통해 더 중요한 상태 업데이트를 수행하고 긴급하지 않은 다른 업데이트를 중단할 수 있습니다. API는 useTransition 및 startTransition입니다.
Suspense를 사용하면 다른 구성 요소를 차단하지 않는 방식으로 구성 요소를 SSR할 수 있습니다.
Suspense는 또한 데이터 프레임워크가 들어와 이를 기반으로 구축할 수 있는 길을 열어줍니다. 그렇게 하면 데이터 프레임워크로 데이터를 가져오면 구성 요소가 기본적으로 일시 중단됩니다.
하루를 구하기 위해 몇 가지 새로운 후크가 들어 왔습니다. useDeferredValue를 사용하기로 결정한 경우 코드에서 디바운스 및 스로틀이 필요하지 않을 수 있습니다.
오래된 브라우저는 영향을 받을 수 있으므로 지원해야 하는 경우 폴리필을 추가해야 합니다.
그게 다야! 우리는 모든 주요 변경 사항을 거쳤습니다. GitHub에서 전체 React 18 변경 로그를 읽을 수 있습니다.

읽어 주셔서 감사합니다.

Mobin Veisy