[React] 렌더링 성능저하 해결하기

정훈·2022년 5월 27일

만약 아래와 같은 상황이라고 하자

import { useState } from "react";
import "./App.css";

let array = new Array(10000).fill(0);

function App() {
  const [data, setData] = useState("");

  return (
    <div>
      <input
        onChange={(e) => {
          setData(e.target.value);
        }}
      />
      {array.map(() => {
        return <div>{data}</div>;
      })}
      {data}
    </div>
  );
}

export default App;

input에 데이터를 입력하면 10000개의 div가 생기는 코드다.

이런 대량의 데이터를 처리하면 당연히 버벅일수밖에 없는데,

이런 버벅이는 현상을 개선할 수 있는 새로운 hook이 react 18ver.에 나왔다.

useTransition

react 공식문서

useTransition은 다음 화면으로 transition하기 전에 컨텐츠가 로드 될 때까지 대기함으로써 컴포넌트가 바람직하지 않은 로딩 상태를 피할 수 있게 해줍니다. 또한 컴포넌트가 더 중요한 업데이트를 즉시 렌더링 할 수 있도록 후속 렌더링까지 느린 데이터 가져오기를 지연시킬 수 있습니다.

useTransition hook은 배열에서 두 개의 값을 반환합니다.

startTransition은 callback을 받는 함수입니다. React에게 지연하고자 하는 상태를 말해주기 위해 이 함수를 사용할 수 있습니다.

isPending은 boolean입니다. transition이 완료되기를 기다리고 있는지 알려주는 React의 방식입니다.

바로 적용해보자.

//useTransition import
import { useState, useTransition } from "react";
import "./App.css";

let array = new Array(10000).fill(0);

function App() {
  const [data, setData] = useState("");

  // useTransition 적용
  const [isPending, startTransition] = useTransition();

  return (
    <div>
      <input
        onChange={(e) => {
        
          // 적용할 코드를 startTransition으로 감싸준다.
          startTransition(() => {
            setData(e.target.value);
          });
        }}
      />
      
      // isPending은 사용 안해도 된다.
      {isPending
        ? "로딩중"
        : array.map(() => {
            return <div>{data}</div>;
          })}
      {data}
    </div>
  );
}

export default App;