13. useTransition

13.1 useTransition 개요

13.1.1 useTransition 이란?

13.1.2 useTransition 을 사용하는 이유?

setInputValue(input);
// 긴급 업데이트 : 입력한 값

setSearchQuery(input);
// 긴급하지 않은 업데이트: 결과 값

• 긴급 업데이트: 입력, 클릭과 같은 직접적인 사용자와의 상호작용을 반영하는 업데이트로, 즉각적으로 서비스가 되지 않으면 사용자가 불편함을 느낄 수 있는 영역

• 전환 업데이트: 하나의 뷰에서 다른 뷰로 UI를 전환하는 업데이트로, 화면에 즉시 나타나지 않아도 사용자가 불편함을 느끼지 않는 영역

import { startTransition } from 'react'
setInputValue(input)
// 긴급 업데이트 : 입력한 값

startTransition(() => {
  
  setSearchQuery(input)
// 전환 업데이트: 결과 값

13.2 useTransition 기본 사용법

13.2.1 useTransition의 기본 구조

const [isPending, startTransition] = useTransition();

function App() {
	const [isPending, startTransition] = useTransition();
	const [count, setCount] = useState(0);

	function handleClick() {
		startTransition(() => {
			setCount(c => c + 2);
		})
	}

	return (
		<div>
			{isPending && "Loading..."}
			<button onClick={handleClick}>{count}</button>
		</div>
	);
}

13.2.2 useTransiton의 작동 방식

In a concurrent render, this is not always the case. … To do this, it waits to perform DOM mutations until the end, once the entire tree has been evaluated. With this capability, React can prepare new screens in the background without blocking the main thread. This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience.

13.2.3 useTransiton의 주의사항

import { startTransiton } from "react"

13.3 (실습1) useTransition을 통해 검색 미리보기 UX 개선하기

13.3.1 useTransition을 사용하지 않았을 경우

import { useState } from "react";
import Page from "./pages/Page";

function App() {
  const [keyword, setKeyword] = useState();

  return (
    <div>
      <Page keyword={keyword} setKeyword={setKeyword}/>
    </div>
  );
}
export default App;

import React from 'react'
import Result from '../components/Result'

function Page({keyword, setKeyword}) {
  return (
    <div>
      <input type="text" onKeyUp={(e) => {setKeyword(e.target.value)}} />

      <Result keyword={keyword}/>
    </div>
  )
}

export default Page

import React from "react";


function Result({keyword}) {

  const bigWork = new Array(10000).fill(0);

  return (
    <div>
      {
        bigWork.map(()=> {
          return <div>{keyword} {keyword} {keyword}</div>
        })
      }
    </div>
  )
}

export default Result

💡

크롬 브라우저에서 React Developer Tools 익스텐션을 설치하면 Profiler로 성능을 측정할 수 있습니다. 결과를 보면 useTransition을 사용하기 전에는 세개의 파일이 거의 동시에 렌더링되는 모습을 볼 수 있으며 렌더링 소요 시간이 74.4ms 인 것을 볼 수 있습니다.

13.3.2 useTransition을 적용해보기

import { useTransition } from "react";
import { useState } from "react";
import Page from "./pages/Page";

function App() {
  const [keyword, setKeyword] = useState();
  const [isPending, startTransition] = useTransition();

  return (
    <div>
      <Page keyword={keyword} setKeyword={setKeyword}
			 isPending={isPending} startTransition={startTransition}/>
    </div>
  );
}
export default App;

import React from 'react'
import Result from '../components/Result'

function Page({keyword, setKeyword, isPending, startTransition}) {
  return (
    <div>
      <input type="text" onKeyUp={(e) => {
        startTransition(()=>{
          setKeyword(e.target.value)
        })
      }} />

      <Result keyword={keyword} isPending={isPending}/>
    </div>
  )
}

export default Page

import React from "react";


function Result({keyword, isPending}) {

  const bigWork = new Array(10000).fill(0);

  return (
    <div>
      {
        isPending ? (
          <div>Loading...</div>
        ) : (
          bigWork.map(() => {
            return <div>{keyword} {keyword} {keyword}</div>
          })
        )
      }
    </div>
  )
}

export default Result

💡

 useTransition을 사용하면 렌더링의 우선순위가 확실히 드러나며 무거운 작업이 있는 Result 컴포넌트가 렌더링 우선순위가 가장 낮은 것을 확인할 수 있습니다. 때문에 Page컴포넌트에 있는 input 의 타이핑에 대한 렌더링이 우선되기에 사용자는 버벅임이 줄어든 것 처럼 느낄 수 있습니다.

useTransition을 사용하면 무거운 작업이 동반되어 있는 상황에서도 사용자가 input에 입력하는 렌더링 결과가 우선적으로 처리됩니다. 여기서 주의할 점은 useTransition이 무거운 작업으로 인한 지연시간 자체를 줄이는 것은 아니라는 것입니다.

13.4 (실습2) useTransition을 통해 페이지 이동 UX 개선하기

13.4.1 useTransition을 사용하지 않았을 경우

import { useState } from "react";
import PageOne from "./PageOne.js";
import PageTwo from "./PageTwo.js";

function Router() {
  const [page, setPage] = useState("/");

  function navigate(url) {
    setPage(url);
  }

  let content;
  if (page === "/") {
    content = (
      <>
        <button onClick={() => navigate("/page-one")}>
          🏋️‍♀️ 데이터 로드가 많은 페이지
        </button>
        <button onClick={() => navigate("/page-two")}>🙂 일반 페이지</button>
      </>
    );
  } else if (page === "/page-one") {
    content = <PageOne />;
  } else if (page === "/page-two") {
    content = <PageTwo />;
  }
  return (
    <>
      <h1>{`홈`}</h1>
      <main>{content}</main>
    </>
  );
}

export default function App() {
  return <Router />;
}

import { Suspense, useEffect } from "react";

export default function PageOne() {

  return (
    <>
      <h1>데이터 로드가 많은 페이지입니다.</h1>
      <Suspense fallback={<h2>Loading...</h2>}>
        {Array(30000)
          .fill()
          .map((v, i) => (
            <div key={i}>불러온 데이터</div>
          ))}
      </Suspense>
    </>
  );
}

import React from "react";

function PageTwo() {
  return <div>일반 페이지입니다.</div>;
}

export default PageTwo;

13.4.2 useTransition 적용해보기

<Suspense fallback={<Spinner/>}>
	<Component/> {/* 비동기적으로 렌더링되는 컴포넌트 */}
</Suspense>

import {  useState, Suspense, useTransition } from "react"; 

function Router() {
  const [page, setPage] = useState("/");
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }

//... 

export default function App() {
  return (
    <Suspense fallback={<h2>🤔 Loading...</h2>}>
      <Router />
    </Suspense>
  );
}

return (
    <>
      <h1>{isPending ? `⏳ 로딩중(isPending...)` : `홈`}</h1>
      <main>{content}</main>
    </>
  );

import { Suspense, useEffect } from "react";

export default function PageOne() {
  
  console.log("🏋️‍♀️ 데이터 로드가 많은 페이지");
  useEffect(() => {
    console.log("마운트: 컴포넌트 처음 그려짐");
  }, []);

  return (
    <>
      <h1>많은 내용이 있는 페이지</h1>
      <Suspense fallback={<h2>Loading...</h2>}>
        {Array(30000)
          .fill()
          .map((v, i) => (
            <div key={i}>불러온 데이터</div>
          ))}
      </Suspense>
    </>
  );
}

import React from "react";

function PageTwo() {
	console.log("🙂 일반 페이지");
  return <div>PageTwo</div>;
}

export default PageTwo;

import { Suspense, useState, useTransition } from "react";
import PageOne from "./PageOne.js";
import PageTwo from "./PageTwo.js";

function Router() {
  const [page, setPage] = useState("/");
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
  if (page === "/") {
    content = (
      <>
        <button onClick={() => navigate("/page-one")}>
          🏋️‍♀️ 데이터 로드가 많은 페이지
        </button>
        <button onClick={() => navigate("/page-two")}>🙂 일반 페이지</button>
      </>
    );
  } else if (page === "/page-one") {
    content = <PageOne />;
  } else if (page === "/page-two") {
    content = <PageTwo />;
  }
  return (
    <>
      <h1>{isPending ? `⏳ 로딩중(isPending...)` : `홈`}</h1>
      <main>{content}</main>
    </>
  );
}

export default function App() {
  return (
    <Suspense fallback={<h2>🤔 Loading...</h2>}>
      <Router />
    </Suspense>
  );
}