React 18에서 전환을 사용하는 방법

my personal blog에 원래 게시됨 .

React 18 came out at the end of March에 새로운 기능이 포함되어 있습니다. 이러한 새로운 기능 중 하나는 전환입니다.

이 튜토리얼에서는 React 18의 전환에 대해 자세히 알아보고 실제 작동을 확인합니다.

정의

두 가지 유형의 전환이 있습니다. 긴급 전환 및 긴급하지 않은 전환.

긴급 전환

긴급 전환은 사용자가 즉시 확인해야 하는 전환입니다. 예를 들어 사용자가 프로필 이름을 변경하고 저장하면 탐색 표시줄에 표시된 프로필 이름의 변경 사항을 볼 수 있어야 합니다.

긴급 전환은 이전에 상태를 설정했던 것과 동일한 방식으로 수행됩니다.

const [name, setName] = useState('');

function handleChange (e) {
    setName(e.target.value); //urgent transition
}

긴급하지 않은 전환

긴급하지 않은 전환은 약간 지연되어도 괜찮은 전환입니다. 예를 들어 사용자가 검색을 수행하는 경우 결과가 즉시 나타나지 않아도 괜찮습니다.

긴급하지 않은 전환을 시작하는 방법에는 두 가지가 있습니다. 첫 번째는 후크useTransition를 사용하는 것입니다.

import {useTransition, useState} from 'react';

export default function MyApp() {
    const [results, setResults] = useState([]);
    const [pending, startTransition] = useTransition();

    function handleChange(e) {
        let tempResults = [];
        ... // set results from APIs
        startTransition(() => {
            setResults(tempResults);
        });
    }
}

후크는 전환이 활성화되었는지 여부를 나타내는 부울 변수pending를 반환합니다. 로딩 구성 요소를 표시하는 데 사용할 수 있습니다.

후크는 상태를 설정하는 콜백 함수를 수락하는 함수startTransition도 반환합니다. 상태는 즉시 설정되지 않습니다.

긴급하지 않은 전환을 시작하는 두 번째 방법은 React에서 직접 가져온 함수startTransition를 사용하는 것입니다.

import {startTransition} from 'react';

export default function MyApp() {
    const [results, setResults] = useState([]);

    function handleChange(e) {
        let tempResults = [];
        ... // set results from APIs
        startTransition(() => {
            setResults(tempResults);
        });
    }
}

이 접근 방식은 전환이 활성화되었는지 여부를 확인하기 위해 isPending와 같은 변수에 대한 액세스를 제공하지 않습니다.

이 접근 방식은 주로 useTransition 와 같은 후크를 사용할 수 없는 코드의 위치에서 사용할 수 있습니다.

사용 예

이 예에서는 표시할 많은 수의 이미지를 허용하는 숫자 입력을 생성합니다. 그런 다음 Falso을 사용하여 임의의 이미지를 검색합니다.

사용할 수 있는 앱이 없는 경우 새 React 앱을 만들어 시작하세요.

npx create-react-app my-app

다음으로 디렉터리my-app로 변경합니다.

cd my-app

그런 다음 Falso 라이브러리를 설치합니다.

npm i @ngneat/falso

이제 src/App.js를 열고 다음과 같이 변경합니다.

import './App.css';

import { useState, useTransition } from 'react';

import { randImg } from '@ngneat/falso';

function App() {
  const [number, setNumber] = useState(5000);
  const [images, setImages] = useState([])
  const [isPending, startTransition] = useTransition();

  function showImages() {
    //TODO add transition
  }

  return (
    <div style={{
      padding: '10px'
    }}>
      <h1>Images</h1>
      <div>
        <label>Number of images</label>
        <input type="number" min="1" max="10000" value={number} onChange={(e) => setNumber(e.target.value)} style={{
          display: 'block',
          marginTop: '10px',
          width: '3rem'
        }} />
        <button type="button" onClick={showImages} style={{marginTop: '10px'}}>Show Images</button>
      </div>
      <div>
        <span>Number selected: {number}</span><br/>
        <span>Results:</span>
        {isPending && <span>Loading...</span>}
        {!isPending && images.length > 0 && images}
      </div>
    </div>
  );
}

export default App;

먼저 2개의 상태 변수number 및 images를 생성합니다. 또한 useTransition 및 isPending 에 대한 액세스를 제공하는 startTransition 를 사용합니다.

반환된 JSX에서 숫자 입력과 나중에 클릭 시 이미지를 검색하는 버튼을 표시합니다.

입력 및 버튼 아래에는 사용자가 입력에 입력한 숫자가 표시됩니다. onChange 입력에 대한 이벤트 핸들러에서 이름이 긴급하게 업데이트됩니다. 사용자가 업데이트하면 즉시 번호가 표시됩니다.

지금 테스트해 봅시다. 웹사이트 서버를 실행합니다:

npm start

그러면 브라우저에서 웹사이트가 열립니다. 입력을 업데이트하려고 하면 그 아래에 표시된 숫자가 즉시 업데이트된다는 것을 알 수 있습니다.



0:00
/
1×

이제 긴급하지 않은 전환을 테스트해 보겠습니다. showImages에서 TODO를 다음 코드로 바꿉니다.

const imgSources = randImg({length: number}).map((url, index) => <img src={`${url}?v=${index}`} key={index} />);
startTransition(() => {
    setImages(imgSources);
})

이렇게 하면 falso 라이브러리를 사용하고 startTransition 상태 변수를 설정하여 images 내부의 이미지를 얻을 수 있습니다.

함수의 반환된 JSX에서 isPending를 사용하여 "로드 중..."을 표시할지 여부를 나타냅니다.

지금 버튼을 클릭하면 "로드 중..."이라는 텍스트가 먼저 표시되고 이미지가 점차 표시됩니다.



0:00
/
1×

결론

React 18의 전환을 통해 특히 로드하는 데 약간의 시간이 필요한 작업이나 기능에 대해 사용자 경험을 최적화할 수 있습니다. 이제 React 18의 전환을 사용하여 지연될 수 있는 업데이트와 상태 업데이트를 구별하고 더 많은 시간이 필요한 업데이트를 위해 필요한 로딩을 UI에 더 효율적으로 표시할 수 있습니다.