React Lazy에 대하여...

1. React Lazy를 사용하는 이유?

React Lazy를 사용하는 이유는 다음과 같다. 만약 다음과 같은 코드가 있다고 가정하자

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Write from "../pages/Write";
import Chart from "../pages/Chart";
import SignIn from "../pages/SignIn";
import SignUp from "../pages/SignUp";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/write" element={<Write />} />
        <Route path="/chart" element={<Chart />} />
        <Route path="/signin" element={<SignIn />} />
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

여기서 만약 매인페이지에 들어왔을 때 어떻게 이 코드가 작동할까? 결과적으로는 사용자가  매인페이지에 들어오는 순간 대규모 단일 javscript 번들이 사용자에게 전달되게 된다. 이는 쉽게 말해서 모든 컴포넌트가 사용자에게 전달되는 것이기 때문에 초기 랜더링 속도가 느릴 수 밖에 없다.

 

2. React Lazy의 동작원리

 : 따라서 우리는 이를 해결하기 위해서 코드 스플리팅 , 즉 코드 분할을 진행해야한다. 이는 결과적으로 각 페이지에 들어갈때 마다 필요한 컴 포넌트만 사용자에게 보내주는 방식을 뜻한다. 즉 사용자가 어떤 페이지에 들어갔을 때 해당 페이지와 연관되는 컴포넌트만 전달하고 나중에 다른 페이지로 이동했을 때 그 페이지와 연관되는 컴포넌트를 전달하는 방식이다. 즉 말 그대로 해당 작업을 지연시켰다가 나중에 로딩하게 해준다는 뜻이다.

 

3. React Lazy와 Suspense 

 : 그렇다면 나중에 페이지에 들어왔을때의 로딩중일 때 이를 어떻게 사용자에게 보여줄 것인가? 바로 그 방법이 Suspense이다.

 

참고자료

https://minprogramming.tistory.com/entry/Suspense에-대하여

Suspense에 대하여...