React 실험 버전 - 동시 모드(Concurrent Mode) > 인사이트

IT＆개발 정보 React 실험 버전 - 동시 모드(Concurrent Mode)

추천0 비추천 0

페이지 정보

작성자 GrapeCity

작성일 2021-08-18 10:05 조회 3,589회 댓글 0건

본문

관련링크

React는 개발자가 웹 및 모바일 기반 응용 프로그램을 위한 대화형 사용자 인터페이스 및 UI 구성 요소를 빌드하는 데 사용하는 오픈 소스 JavaScript 라이브러리입니다.

Facebook 소프트웨어 엔지니어인 Jordan Walk가 만든 React의 첫 버전은 7년 전에 릴리스되었습니다. 현재 Facebook은 이를 유지하고 있습니다. 처음 출시된 이후, React의 인기는 치솟았습니다.

2020년 10월, React 17은 새로운 기능이 전혀 없는 것으로 밝혀졌습니다. 하지만 그렇다고 해서 흥미로운 기능이 전혀 추가되지 않은 것은 아닙니다. 실제로 이 릴리스에서는 버전 16의 실험 기능에 대한 몇 가지 개선 사항과 버그 수정 사항을 포함한 많은 업그레이드가 이뤄졌습니다. 동시 모드 및 서스펜스.

이러한 기능은 아직 일반 대중이 사용할 수 없지만 개발자 실험에 사용할 수 있습니다. 출시되면 React가 UI를 렌더링하는 방식을 변경하여 성능과 사용자 경험을 모두 개선하도록 설정됩니다.

간략하게 동시 모드와 서스펜스 기능을 통해 사용자는 데이터 로드, 로드 상태 및 사용자 인터페이스를 보다 유연하고 원활하게 처리할 수 있습니다. 동시 모드에서 React는 자원이 많이 들고 급하지는 않은 컴포넌트의 렌더링을 일시 중지하고 UI 렌더링 같은 보다 즉각적이거나 급한 동작에 초점을 맞추고 응용 프로그램 응답성을 유지할 수 있습니다.

이 문서에서는 데이터 가져오기를 위한 동시 모드 및 서스펜스에 대해 자세히 설명합니다.

왜 동시 모드(Concurrent Mode)를 사용할까요?

JavaScript 프레임워크 또는 라이브러리는 하나의 스레드로 작동합니다. 따라서 코드 블록이 실행될 때 나머지 블록은 실행을 기다려야 합니다. 어떤 작업도 동시에 수행할 수 없습니다. 이 개념은 렌더링에도 적용됩니다.

React가 렌더링을 시작하면 인터럽트할 수 없습니다. React 개발자는 이 렌더링을 "렌더링 차단"이라고 합니다. 렌더링 차단은 불안정하고 때때로 응답을 중지하는 사용자 인터페이스를 만듭니다. 문제를 좀 더 깊이 살펴보도록 하겠습니다.

문제

필터링 가능한 제품 목록을 표시하는 응용 프로그램이 있다고 상상해 봅시다.

레코드를 필터링할 수 있는 검색 상자가 있습니다. 사용자가 키를 누를 때마다 UI와 목록을 다시 렌더링하려고 합니다.

목록이 길면 UI가 "버벅거립니다", 즉 렌더링을 사용자가 인지할 수 있습니다. 버벅거림이 있으면 성능도 저하됩니다. 개발자는 스로틀링, 디바운싱 등 몇 가지 기술을 사용할 수 있습니다. 이는 약간은 도움이 되지만 해결책은 아닙니다.

스로틀링은 특정 함수가 호출되는 횟수를 제한합니다. 스로틀링을 사용하면 비싸고 시간이 많이 걸리는 API 또는 함수에 대한 반복적인 호출을 피할 수 있습니다. 이 프로세스는 특히 사용자 인터페이스의 정보를 렌더링할 때 성능을 획기적으로 향상시킵니다.

디바운싱은 미리 정해진 시간 동안 함수 호출을 무시합니다. 함수 호출은 미리 정해진 시간이 경과한 후에만 수행됩니다.

아래 이미지에서 버벅거림을 볼 수 있습니다.

버벅거림 이미지

긴급하지 않은 API 호출이 완료되기를 기다리는 동안 UI는 버벅거리고 사용자 인터페이스 렌더링을 차단합니다. 솔루션은 동시 모드를 사용하여 중단 가능한 렌더링입니다.

인터럽트할 수 있는 렌더링

인터럽트 렌더링을 사용하는 React.js는 목록을 처리하고 다시 렌더링하는 동안 UI를 차단하지 않습니다. 사소한 작업을 일시 중지하고 DOM을 업데이트하며 UI가 중단되지 않도록 함으로써 React.js를 보다 세분화합니다.

사용자 입력을 병렬로 업데이트하거나 입력 상자를 다시 그립니다. 또한 메모리의 목록도 업데이트합니다. React는 업데이트를 완료한 후 DOM을 업데이트하고 사용자 디스플레이에 목록을 다시 렌더링합니다. 본질적으로 인터럽트 가능한 렌더링은 React가 "멀티태스킹"할 수 있도록 합니다. 이 기능은 보다 유연한 UI 경험을 제공합니다.

동시 모드(Concurrent Mode)

동시 모드는 React 응용 프로그램이 사용자의 장치 및 네트워크 속도 기능에 대응하고 원활하게 조정할 수 있도록 도와주는 기능 집합입니다.

동시 모드는 작업을 더 작은 청크로 나눕니다. React 스케줄러는 수행할 작업을 선택하고 선택할 수 있습니다. 작업 예약은 작업 우선 순위에 따라 달라집니다. 작업의 우선 순위를 지정함으로써 사소한 작업이나 긴급하지 않은 작업을 중지하거나 작업을 더 미룰 수 있습니다. React는 항상 사용자 인터페이스 업데이트와 렌더링을 최우선 순위로 둡니다.

동시 모드를 사용하면 다음을 수행할 수 있습니다.

첫 번째 렌더링 프로세스를 제어
렌더링 프로세스의 우선 순위 지정
컴포넌트 렌더링 일시 중단 및 재개
컴포넌트의 런타임 렌더링 캐시 및 최적화
필요시까지 디스플레이에서 내용 숨김

UI 렌더링과 함께 동시 모드는 들어오는 데이터, 지연 로드 컴포넌트 및 비동기 프로세스에 대한 응답을 개선합니다.

동시 모드는 백그라운드에서 데이터를 업데이트하는 동안 사용자 인터페이스가 반응형이고 업데이트하도록 유지합니다.

동시 모드는 useTransition 및 useDeferredValue라는 두 가지 React 후크와 함께 작동합니다.

지연된 값 후크 사용 (Deferred Value Hook)

useDeferredValue 후크의 구문은 다음과 같습니다.

const deferredValue = useDeferredValue(value, { timeoutMs: <some value> });

이 명령은 값이 timeoutMs에 설정된 시간 동안 "지연"되도록 합니다.

이 명령은 사용자 인터페이스를 즉시 업데이트해야 하는지 또는 데이터를 기다려야 하는지 여부와 관계없이 사용자 인터페이스를 반응형, 응답형으로 유지합니다.

이 후크는 UI가 중단되지 않도록 하며 가져온 데이터의 지연을 유지하는 사소한 자원으로 사용자 인터페이스를 항상 응답할 수 있도록 합니다.

전환 후크 사용 (Transition Hook)

useTransition 후크는 주로 서스펜스와 함께 사용되는 React 후크입니다.

웹페이지에 사용자 이름이 있는 버튼이 있는 경우 다음 시나리오를 고려해 보십시오. 버튼을 클릭하면 웹 페이지가 화면에 사용자의 세부 정보를 표시합니다.

사용자가 한 버튼을 먼저 클릭한 후 다음 버튼을 클릭한다고 가정해 봅시다. 화면이 비어 있거나 화면에 스피너가 나타납니다. 세부 정보를 가져오는 데 시간이 너무 오래 걸리면 사용자 인터페이스가 중지될 수 있습니다.

useTransition 메서드는 두 개의 후크인 startTransition 및 isPending의 값을 반환합니다.

useTransition 메서드의 구문은 다음과 같습니다.

const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

startTransition 구문은 다음과 같습니다.

<button disabled={isPending}  
startTransition(() => {  
      <fetch Calls>  
});  
</button>  
{isPending? " Loading...": null}

useTransition 후크를 사용하여 React.js는 사용자 세부 정보가 준비될 때까지 사용자 세부 정보 없이 사용자 인터페이스를 계속 표시합니다.

React는 데이터를 병렬로 가져오는 동안 사용자 인터페이스의 응답성을 유지하기 위해 사용자 인터페이스의 우선 순위를 지정합니다.

서스펜스 데이터 가져오기 (Suspense for Data Fetching)

서스펜스는 React가 동시 모드와 함께 도입한 또 다른 실험 기능입니다. 서스펜스를 사용하면 컴포넌트가 렌더링 전에 미리 결정된 기간을 기다릴 수 있습니다.

서스펜스의 주요 목표는 데이터 소스에 대해 신경 쓰지 않고 구성 요소에서 데이터를 비동기적으로 읽는 것입니다. 서스펜스는 지연 로딩 개념과 함께할 때 가장 좋습니다.

서스펜스를 사용하면 데이터 가져오기 라이브러리가 데이터 컴포넌트를 사용할 준비가 되었는지 React에 알릴 수 있습니다. 이 통신에서 React는 필요한 컴포넌트가 준비될 때까지 UI를 업데이트하지 않습니다.

서스펜스는 다음을 가능케 합니다.

데이터 가져오기 라이브러리와 React 컴포넌트 간의 통합
시각적인 로딩 상태 제어
경쟁 조건 피하기

Spinner 컴포넌트의 기본 구문은 다음과 같습니다.

import Spinner from './Spinner';  
  <Suspense fallback={<Spinner />}>  
    <SomeComponent />  
  </Suspense>

동시 모드에서 사용되는 서스펜스를 사용하면 시간이 많이 걸리는 컴포넌트가 데이터를 기다리는 동안 렌더링을 시작할 수 있습니다. 그동안 자리 표시자를 표시합니다.

이 조합은 보다 유연한 UI 경험을 제공합니다.

서스펜스 및 지연 컴포넌트

React.lazy는 React.js가 컴포넌트를 느리게 로드할 수 있도록 하는 새로운 기능입니다. 지연 로딩은 필요할 때만 컴포넌트가 로드됨(코드 검색 및 렌더링)을 의미합니다. 지연 로딩은 가장 중요한 사용자 인터페이스 구성 요소의 우선 순위를 지정합니다. React 개발자는 서스펜스 컴포넌트 내부에 지연 컴포넌트를 줄 바꿈 처리하는 것이 좋습니다.

이렇게 하면 컴포넌트가 렌더링 중일 때 "불량 상태"가 발생하지 않습니다. 사용자 인터페이스는 프로세스 동작 시 응답성을 유지하며 보다 유연한 사용자 경험으로 이어집니다.

동시 모드 활성화

동시 모드를 활성화하려면 React Experimental 버전을 설치하세요. React 설치를 위한 필수 요소는 노드 패킷 관리자(npm)입니다. 실험 버전을 설치하려면 명령 프롬프트에서 명령을 실행합니다.

npm install react@experimental react-dom@experimental

실험 빌드가 설정되었는지 테스트하려면 샘플 React 응용 프로그램을 만듭니다. 실험적 기능이 없으면 렌더 코드는 다음과 같습니다.

import * as React from 'react';  
import { render } from 'react-dom';  
render(<App />, document.getElementById('root'));

동시 모드에서 다음 코드를 작성하세요.

import * as React from 'react';  
import { createRoot } from 'react-dom';  
createRoot(document.getElementById('root')).render(<App />);

이렇게 하면 전체 응용 프로그램에서 동시 모드가 활성화됩니다.

React는 렌더링 호출을 두 부분으로 나눕니다.

루트 요소 만들기
렌더링 호출 사용

현재 React는 세 가지 모드를 유지할 계획입니다.

레거시 모드는 이전 버전과의 호환성을 위한 기존 또는 현재 모드입니다.
차단 모드는 동시 모드 개발의 중간 단계입니다.
동시 모드

차단 모드는 createRoot 호출 대신 createBlockingRoot 호출을 사용합니다. 차단 모드는 개발자가 동시 모드 개발 중에 버그를 수정하고 문제를 해결할 수 있도록 합니다.

React 문서에서는 각 모드가 다음 기능을 지원한다고 합니다.

react 문서

샘플 어플리케이션

동시 모드와 기존 모드 또는 블록 렌더링을 사용하는 다른 모드 간의 차이점을 보여주기 위해 픽셀 응용 프로그램을 만들었습니다. 픽셀 응용 프로그램은 임의 픽셀과 검색 상자가 있는 150x150 캔버스입니다. 사용자가 검색 상자에 입력할 때마다 캔버스가 다시 렌더링됩니다.

UI가 동시 모드에서 렌더링되지 않더라도 사용자 입력은 업데이트를 중지하지 않습니다. 처리가 완료된 후 픽셀 캔버스가 다시 렌더링됩니다. 레거시 모드에서 빠르게 입력하면 UI가 중지되고 때로는 캔버스를 다시 렌더링하기 전에 중단됩니다. 사용자 입력도 정지되고 업데이트되지 않습니다.

픽셀 응용 프로그램을 빌드하기 위한 기본 파일은 canvas.js입니다. 사용자가 무엇이든 입력할 수 있는 입력 상자도 만들었습니다. 키를 누를 때마다 픽셀 캔버스가 다시 렌더링됩니다.

코드 파일

index.js

import React from "react";    import ReactDOM from "react-dom";  
  import App from "./App";  
  // Traditional or non-Concurrent Mode react  
  const rootTraditional = document.getElementById("root");  
  ReactDOM.render(<App caption="Traditional or Block Rendering" />,  
  rootTraditional);  
  // Concurrent Mode enabled  
  const rootConcurrent = document.getElementById("root-concurrent");  
  ReactDOM.createRoot(rootConcurrent).render(<App caption="Interruptible  
  Rendering"   />);

App.js

import React, { useState, useDeferredValue } from "react";  
import "./App.css";  
import { Canvas } from "./Canvas";  
export default function App(props)  
{ const [value, setValue] = useState("");  

//This is available only in the Concurrent mode.

  const deferredValue = useDeferredValue(value, {  
    timeoutMs: 5000  
  });  

  const keyPressHandler = e => {  
    setValue(e.target.value);  
  };  

  return (  
    <div className="App">  
      <h1>{props.caption}</h1>  
      <input onKeyUp={keyPressHandler} />  
      <Canvas value={deferredValue} />  
    </div>  
  );  
}

Canvas.js

import React from "react";  
  const CANVAS_SIZE = 70;  
  const generateRandomColor = () => {  
  var letters = "0123456789ABCDEF";  
  var color = "#";  
  for (var i = 0; i < 6; i++) {  
    color += letters[Math.floor(Math.random() * 16)];  
  }  
  return color;  
};  
  const createCanvas = (rows, columns) => {  
  let array = [];  
  for (let i = 0; i < rows; i++) {  
    let row = [];  
    for (let j = 0; j < columns; j++) {  
      row.push(0);  
    }  
    array.push(row);  
  }  
  return array;  
};  
  //This is the square with the pixels  
const drawCanvas = value => {  
  const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);  
  return canvas.map((row, rowIndex) => {  
    let cellsArrJSX = row.map((cell, cellIndex) => {  
      let key = rowIndex + "-" + cellIndex;  
      return (  
        <div  
          style={{ backgroundColor: generateRandomColor() }}  
          className="cell"  
          key={"cell-" + key}  
        />  
      );  
    });  
    return (  
      <div key={"row-" + rowIndex} className="canvas-row">  
        {cellsArrJSX}  
      </div>  
    );  
  });  
};  
export const Canvas = ({ value }) => {  
  return (  
    <div>  
      <h2 style={{ minHeight: 30 }}>{value}</h2>  
      <div className="canvas">{drawCanvas(value)}</div>  
    </div>  
  );  
};

Index.html

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <meta  
      name="viewport"  
      content="width=device-width, initial-scale=1, shrink-to-fit=no"  
    />  
    <meta name="theme-color" content="#000000" />  
    <title>React App Concurrent Mode</title>  
  </head>  
  <body>  
    <noscript>  
    You need to enable JavaScript to run this app.  
    </noscript>  
    <div id="container">  
      <div id="root" class="column"></div>  
      <div id="root-concurrent" class="column"></div>  
    </div>  
  </body>  
</html>