React 성능 개선하기

📒 왜?

◼ React는 SPA로, 사용자가 처음 메인 페이지에 접속하면, 모든 js 파일을 다운로드 하여 초기 로딩 속도가 느려, 성능 개선 작업을 위한 방법에 대해서 알아보고자 한다.

---

📒 React 성능 개선하기

✔ 개발 도구 설치

◼ React Developer Tools를 설치한다.

 

◼ Components 창에서 Component의 구조, Props 등을 확인할 수 있다. 

◼ Profiler 창에서 성능 저하가 발생하고 있는 Component를 찾을 수 있다. (녹화 버튼을 누르고 페이지 이동 및 버튼 클릭 등 사용하다 보면 Component 별로 렌더링 속도를 알려준다.)

💥 대부분의 지연은 서버의 통신이 느린 것

 

✔ Lazy 로딩

◼ React는 SPA이기 때문에, 하나의 html, js, css 파일에 모든 코드가 들어 있고, 사용자가 메인 페이지에 접속하면 큰 js 파일을 다운 받기 때문에, 처음 렌더링 속도가 느려진다.

◼ 따라서, 메인 페이지에 접속할 때, 사용하지 않는 Component들을 먼저 로드 시키지 않도록 Lazy 로딩을 사용할 수 있다.

 

import Detail from "pages/items/item"; // 사용 X
 
const Detail = lazy(() => import("pages/items/detail"));

◼ 위와 같이 import 문은 제거하고, lazy()를 사용하여 Detail을 Lazy 로딩할 수 있다.

◼ Lazy 로딩을 하면, 해당 Component는 빌드 시, 별도의 js 파일로 분리된다.

◼ 사용자가 Detail Component를 사용하게 될 때, 로딩이 이루어지므로 지연 시간이 발생할 수 있다.

 

import React, { Suspense, lazy } from "react";

const Detail = lazy(() => import("pages/items/detail"));

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <Route
      path="/detail/:id"
      element={
        <Suspense fallback={<div>로딩 중...</div>}>
          <Detail />
        </Suspense>
      }
    />
);

◼ Suspend Component를 사용해서 지연 시간 동안 다른 Element를 화면에 출력할 수 있다.

◼ Lazy 로딩을 사용할 것이라면 반드시 사용하는게 좋다.

 

import React, { Suspense, lazy } from "react";

const Detail = lazy(() => import("pages/items/detail"));
const Cart = lazy(() => import("pages/cart/cart"));

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Suspense fallback={<div>로딩 중...</div>}>
      <Routes>
        <Route path="/detail/:id" element={<Detail />} />
        <Route path="/cart" element={<Cart />}></Route>
      </Routes>
    </Suspense>
  </BrowserRouter>
);

◼ Routes Component 안에 여러 개의 Lazy Component가 있으면, 위와 같이 Routes Component 위에 Suspend Component를 작성하여 사용할 수 있다.

 

✔ 자식 Component 재렌더링 막기

◼ React에서는 기본적으로 부모 Component가 재렌더링되면, 자식 Component도 재렌더링된다.

◼ 부모 Component만 재렌더링하면 되는 상황에 사용하여, 자식 Component 재렌더링 비용을 막을 수 있다.

 

import { memo } from "react";

const CartBody = memo(({ item }) => {
  return (
    <tr>
      <td>{item.id}</td>
      <td>{item.title}</td>
      <td>{"count" in item ? item.count : 0}</td>
      <td>{item.price}</td>
    </tr>
  );
});

export default CartBody;

◼ Component를 생성할 때, memo를 사용해서 감싸면, 자식 Component는 재렌더링하지 않는다.

   💥 자식 Component에서 사용하는 Props의 값이 변하면 재렌더링이 발생한다.

◼ memo를 사용하면 기존 props랑 신규 props랑 비교 연산이 이루어지고, 다르면 재렌더링을 진행한다.

◼ Props 비교 연산이 이루어지기 때문에, 재렌더링이 무거운 Component에만 사용하는 것이 좋다.

 

✔ 무거운 연산의 함수 실행을 Component Mount 시에만 동작

import { useMemo } from "react";

const heavy = () => {
  for (let i = 0; i < 1000000; i++) {
    console.log(i);
  }
};

const CartBody = memo(({ item }) => {
  const result = useMemo(() => {
    heavy();
  });
  
  return (
    <tr>
      <td>{item.id}</td>
      <td>{item.title}</td>
      <td>{"count" in item ? item.count : 0}</td>
      <td>{item.price}</td>
    </tr>
  );
});

export default CartBody;

◼ 함수의 실행을 Component의 mount 시점에만 동작하도록 보장해준다.

◼ 콜백 함수 뒤에 변화 감지 state Array를 설정해서 해당 state가 변경되면, 함수가 실행되게 할 수 있다.

◼ useEffect와 사용법이 동일하다.

   💬 useEffect는 return()으로 기입한 html 코드가 렌더링 된 후, 함수가 실행되는 반면, useMemo는 html 코드가 렌더링 될 때, 동시에 함수가 실행된다.

 

✔ Input 값 변경으로 인한 State 시 성능 저하 발생 해결

const Test = () => {
  let [inputVal, setInputVal] = useState("");
  const heavy = new Array(100000).fill(0);
  
  return (
    <div>
      <input
        type="text"
        onChange={(e) => {
          startTransition(() => {
            setInputVal(e.target.value);
          });
        }}
      ></input>
      {heavy.map(() => (
        <div>{inputVal}</div>
      ))}
    </div>
  );
}

◼ input 입력 값이 변할 때마다, 재렌더링이 일어나 heavy라는 무거운 연산이 계속 실행된다. 

 

import { useState, useTransition } from "react";

const Test = () => {
  let [inputVal, setInputVal] = useState("");
  let [isPending, startTransition] = useTransition();
  const heavy = new Array(100000).fill(0);
  
  return (
    <div>
      <input
        type="text"
        onChange={(e) => {
          startTransition(() => {
            setInputVal(e.target.value);
          });
        }}
      ></input>
      {heavy.map(() => (
        <div>{inputVal}</div>
      ))}
    </div>
  );
}

◼ useTransition을 사용해서 state 변화로 인한 성능 저하를 줄여줄 수 있다.

◼ startTransition 함수로 state 변화가 발생하는 부분을 감싸준다.

◼ 브라우저는 싱글 스레드로 동시에 여러 작업을 처리할 수 없다. 그런데 input 값의 변경을 보여주고, input 값의 변경으로 인해 재렌더링이 일어나 <div> 태그를 변경된 state를 활용해, 계속 생성하려는 작업이 충돌하게 된다.

◼ startTransition으로 감싸진 코드는 늦게 실행시켜 주기 때문에, 동시에 하려는 작업으로 느려지는 현상을 풀어준다.

◼ isPending은 startTransition으로 감싼 함수가 실행 중이면 true를 반환한다.

 

import { useState, useDeferredValue } from "react";

const Test = () => {
  let [inputVal, setInputVal] = useState("");
  let state = useDeferredValue(inputVal);
  const heavy = new Array(100000).fill(0);
  
  return (
    <div>
      <input
        type="text"
        onChange={(e) => {
          setInputVal(e.target.value);
        });
      ></input>
      {heavy.map(() => (
        <div>{state}</div>
      ))}
    </div>
  );
}

◼ 위 코드와 같은 역할을 하는 코드로 useDeferredValue로 설정한 state로 하려는 작업이 가장 늦게 처리되도록 한다.