[React] 리액트 코드 스프리팅(Code Splitting)

코드 스플릿팅이라고 하는 것은 webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미한다.

* 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서

이다. => 하나의 번들 파일을 여러 개의 번들 파일로 나눈 뒤 실제 로드될 화면에 필요한 번들 파일만 불러오고 나머지 번들 파일은 호출하지 않고 지연시킴으로 써 작업량을 줄여 더 빠른 속도로 화면이 보일 수 있게 도와주게 된다.

🎵 리액트에서 코드 스플리팅

React.lazy

💡 컴포넌트를 렌더링하는 시점에 비동기적으로 로딩할 수 있게 해주는 유틸 함수이다.

Suspense

💡 리액트 내장 컴포넌트로 컴포넌트를 렌더링 할 때 비동기적으로 로딩하게 해주는 함수
즉, 코드 스플리팅 된 컴포넌트를 로딩하고, 로딩이 끝나지 않았을 때 보여줄 UI를 설정
fallback이라는 props를 통해 로딩 중에 보여줄 JSX 문법을 지정할 수 있다.

React.lazy + Suspense


import React, { Suspense } from 'react';

const Main = React.lazy(() => import('./Main'));

const myComponent = {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Main />
        </Suspense>
    )
}

이전에는 동적 import를 통해 불러오고 컴포넌트를 state에 넣어서 구현했다고 한다.

🎨 코드 분할을 결정하는 요소

1. Route level


import React, { lazy, Suspense } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Layout from "./Layout";
import ScrollToTop from "../components/ScrollToTop";
import LoadingSpinner from "../components/LoadingSpinner";
const Start = lazy(() => import("../pages/Start"));
const Main = lazy(() => import("../pages/Main"));
const Login = lazy(() => import("../pages/Login/Login"));

const Router = () => {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <Layout>
        <Routes>
          <Route
            path="/"
            element={
              <Suspense fallback={<LoadingSpinner />}>
                <Start />
              </Suspense>
            }
          />
          <Route
            path="main"
            element={
              <Suspense fallback={<LoadingSpinner />}>
                <Main />
              </Suspense>
            }
          />
          <Route
            path="login"
            element={
              <Suspense fallback={<LoadingSpinner />}>
                <Login />
              </Suspense>
            }
          />
         
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

💡 라우트마다 다른 컴포넌트로 관리를 하고 있을 경우, 각 라우트를 import 함수를 통해 분리된 빌드 파일로 관리 할 수 있다.
유저가 다른 페이지로 넘어갈때만 그 페이지를 비동기적으로 로딩할 수 있음.

2. Component level

💡 페이지 안에 있지만 보이지 않는 컴포넌트가 존재할 수 있다.
예를 들어 유저가 메인페이지에서 새로운 글을 작성하고자 할 때, 작성하기 버튼을 눌러 모달이 뜨게 된다면 그 모달을 import 함수로 스플리팅해서 관리할 수 있다.

import React, { lazy, Suspense } from "react";
const CreateBoard = React.lazy(() => import("./CreateBoard"));
const CreateFeed = React.lazy(() => import("./CreateFeed"));

function Header() {
		{isWriteMenuOpen && (
          <>
            <ToggleWriteMenu>
              <MenuButton
                aria-label="포트폴리오작성버튼"
                onClick={() => {
                  toggleWriteMenuClose();
                  toggleProfileMenuClose();
                  toggleMenuClose();
                  closeAlarmList();
                  openModal("feed");
                }}
              >
                포트폴리오 작성
              </MenuButton>
              <MenuButton
                aria-label="구인/구직글 작성버튼"
                onClick={() => {
                  toggleWriteMenuClose();
                  toggleProfileMenuClose();
                  toggleMenuClose();
                  closeAlarmList();
                  openModal("board");
                }}
              >
                구인/구직글 작성
              </MenuButton>
            </ToggleWriteMenu>
          </>
        )}
        {modalType === "feed" && (
          <Suspense fallback={<LoadingSpinner />}>
            <CreateFeed open={openModal} close={closeModal} />
          </Suspense>
        )}
        {modalType === "board" && (
          <Suspense fallback={<LoadingSpinner />}>
            <CreateBoard open={openModal} close={closeModal} />
          </Suspense>
        )}
  }

2. 하나의 페이지를 스플리팅하기

💡 페이지 하나가 되게 긴 경우, 그 페이지에 들어갈 때 당장 보이는 부분을 나머지와 분리하고, 그 뒷부분을 다른 컴포넌트로 만들어 스플리팅할 수 있다.

요니의 개발기록장