[React lazy] 리액트 lazy 사용하기 (SPA 속도 단점 보안)

안녕하세요! 프뚜입니다.

 

리액트에서 SPA(Single Page Application)으로 개발을 진행하고 있습니다. SPA의 장점은 빠른 화면 이동 처리입니다. 하지만 빠른 화면이동 처리를 하기 위해선 첫 로딩 때 모든 페이지를 가져와야하는 부담이 있습니다. (페이지가 많아질수록 속도 이슈가 있음) 이 부분을 보안하기 위해 lazy를 도입하게 되었습니다.

---

[개발 환경]

- OS: Windows 10 64Bit

- React: 18.2.0

---

# router.js로 이동하기

import React, {lazy} from 'react';
import {createBrowserRouter} from 'react-router-dom';

// 2023.02.03[프뚜]: template은 import 사용
import EmptyTemplate from '../pages/template/EmptyTemplate';

// 2023.02.03[프뚜]: SPA를 사용하기 때문에 layout 단위들은 lazy를 사용
const Main = lazy(() => import('../pages/layout/Main'));
const Login = lazy(() => import('../pages/layout/Login'));

export default createBrowserRouter([
  {
    path: '/',
    element: <EmptyTemplate />,
    children: [
      {
        path: '/',
        element: <Main />
      },
      {
        path: 'login',
        element: <Login />
      }
    ]
  }
]);

템플릿은 처음 로딩때 가지고 있어야하기때문에 import로 되어있습니다. 하나의 페이지들은 router로 이동 되었을 때 loading할 수 있게 lazy함수를 사용했습니다. Main 페이지는 첫 로딩이긴 하나, layout 부분은 lazy로 통일 시키게 되었습니다.

라우터 세팅 방법에 대해선 링크를 통해 확인해보실 수 있습니다.

---

CSR, SSR 장점과 단점이 다양하지만, 현재 프로젝트는 CSR로 개발진행되고 있습니다. 추후 개발 내용들은 CSR 관점으로 포스팅 예정입니다.