[React] 리액트 lazy loading 적용하기(lighthouse 성능 최적화)

2022. 5. 30. 01:57· Web dev/React
목차
  1. Suspense란?
  2. lazy-loading 적용방법
반응형

최종 프로젝트를 진행하던 중 리액트 lazy-loading으로 최적화 작업을 진행했다. 지연로딩(lazy-loading)이라는 것은 로딩을 바로 하지 않고 지연시켰다가 나중에 로딩하게 해준다는 뜻으로 사용자가 사이트에 접속했을 때 보이지 않는 것까지 모두 로드해오는 것이 아니라 보이는 페이지만 로드한 후 다른 페이지에 접속했을 때 그곳의 데이터를 로드해오는 작업을 해주는 것이다.

큰 React 애플리케이션은 일반적으로 많은 구성 요소와 유틸리티 메서드 및 타사 라이브러리로 구성되는데 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이러한 불필요한 작업이 반복되면 페이지 성능에 영향을 줄 수 있기 때문에 최적화를 시도하는 작업이 반드시 필요할 수밖에 없게 된다.

그래서 애플리케이션 최적화 방법을 알아보던 중에 React.lazy 함수를 알게 되었고 이는 Suspense 구성 요소와 결합하여 로드 상태를 처리할 수 있도록 해준다.

Suspense란?

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하기 때문에 Suspense 컴포넌트로 lazy 컴포넌트를 감쌌고, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안  스피너와 같은 예비 컨텐츠를 보여줄 수 있게 해준다. fallback prop로 컴포넌트가 로드될 때까지 기다리는 동안 스피너를 적용시켜 보여줄 수 있게 하면 된다.

lazy-loading 적용방법

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

// 기존 import방식
import Header from '../components/Header';
import Footer from '../components/Footer';

// 레이지 로딩 적용
const AudioWrite = lazy(() => import('../pages/AudioWrite'));
const Book = lazy(() => import('../pages/Book'));
const BookDetail = lazy(() => import('../pages/BookDetail'));

function App() {
  return (
    <React.Fragment className="App">
      <ConnectedRouter history={history}>
        <Header />
        <Wrap>
          <Suspense fallback={<Spinner />}>
            <Route path="/audioWrite" exact component={AudioWrite} />
            <Route path="/audioWrite/:category/:bookId" exact component={AudioWrite} />
            <Route path="/book/" exact component={Book} />
            <Route path="/book/:category" exact component={Book} />
            <Route path="/bookDetail/:category/:bookId" exact component={BookDetail} />
          </Suspense>
        </Wrap>
        <Footer/>
      </ConnectedRouter>
    </React.Fragment>
  );
}

const Wrap = styled.div`
  min-height: calc(100vh - 300px);
`

export default App;

 

반응형
저작자표시 비영리 동일조건 (새창열림)
  1. Suspense란?
  2. lazy-loading 적용방법
'Web dev/React' 카테고리의 다른 글
  • [TIL] 리액트 카카오톡 소셜로그인 간단하게 구현하기(프론트 부분)
  • [React] Redux에서 SWR로 (React SWR Data Fetching)
  • [React] 리액트 전역상태관리 리덕스(Redux, Redux-thunk, immer 사용)
  • [React] 리액트 훅에 대해 알아보기(React Hooks란?)
도잎
도잎
프론트엔드 개발 성장기록
도잎
JDevelog
도잎
전체
오늘
어제
반응형
  • 분류 전체보기 (149)
    • Web dev (48)
      • React (22)
      • Vue (8)
      • Next.js (6)
      • Node.js (2)
      • Springboot (2)
    • App dev (2)
      • Flutter (2)
    • Language (33)
      • javascript (30)
      • typescript (2)
      • java (1)
    • StyleSeet (3)
      • CSS (3)
      • Sass (0)
    • Database (2)
      • PostgreSQL (1)
    • DevOps (11)
      • Webpack (4)
      • Linux (3)
      • Docker (2)
      • Tomcat (1)
    • 개발지식 (2)
      • Web (1)
    • 항해99(6기) (20)
    • UXUI (0)
    • 알고리즘 (25)
    • 유용정보 (2)

최근 글

hELLO · Designed By 정상우.v4.2.1
도잎
[React] 리액트 lazy loading 적용하기(lighthouse 성능 최적화)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.