[2022.07.30]사이트 느린 로딩 해결하기(React.memo + React.lazy)

사이트가 로딩시 오래 걸리는 문제를 해결하고 싶었음 (방법1+방법2를 같이 사용하여 로딩시간 단축 해결)

 

방법1: React.memo 이용하기

▼ map이 사용되는 jsx에 마지막 export에 아래 코드와 같이 React.memo를 추가한다.

export default React.memo(ZetaMap);

---

 

방법2 (App.js)

(1) import 시켜주기

import { Suspense } from 'react';

(2) 기존 페이지 컴포넌트 import방식을 아래와 같이 const 컴포넌트명=React.lazy(()=>import('경로')); 로 변경한다.

const Login = React.lazy(() => import('./pages/login'));

 

(3) Routes를 <Suspense fallback={<div>Loading...</div>}> </Suspense>로 감싸준다.

로딩되어 뜨기 전 loading되는 페이지임. 이걸 써주지 않을 시, 메뉴 클릭시 해당 페이지로 가지 않는 오류가 생길 수 있다.

안에 Loading되는 건 자유 구성 가능.

 <BrowserRouter>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Landing />} />
      </Routes>
    </Suspense>
</BrowserRouter>

 

▼ 정리한 총 코드 - app.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
...
import { useState, Suspense } from 'react';
const Login = React.lazy(() => import('./pages/login'));
.......
const QnaWrite = React.lazy(() => import('./pages/notice/QnaWrite'));

function App() {
  const [hdSubStyle, setHdSubStyle] = useState('hdMain');

  return (
    <div className="App">
      <ResetStyle />
      <BrowserRouter>
        <ScrollToTop />
        <Header hdSubStyle={hdSubStyle} />

        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Landing />} />
            ...
            ....
          </Routes>
        </Suspense>
      </BrowserRouter>
      <Consulting />
      <TopBtn />
      <Footer />
    </div>
  );
}

export default App;

 

방법2 레퍼런스

https://reactjs.org/docs/code-splitting.html#gatsby-focus-wrapper

Code-Splitting – React

 

 

 

 

*network이용하여 확인

구글크롬>network 에서 용량, 로딩시간 확인 가능

size 300을 넘으면 안되긴함

 

https://ktko.tistory.com/entry/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-Network-%EC%82%AC%EC%9A%A9%EB%B2%95

크롬 개발자도구 Network 사용법