Lazy Loading 이란

웹 어플리케이션의 성능을 향상시키는 기술 중 하나입니다.
웹 페이지기 처음 로드될 때 필요하지 않은 리소스(이미지, 스크립트, 컴포넌트...) 등등 를 로드하지 않는 방식입니다.

React의 경우 웹 페이지를 최초 로드할 때 모든 데이터를 로드한 후 페이지를 그리기 때문에
웹 어플리케이션이 무거울 수록 로딩되는 속도가 느려집니다. 이를 해결하기 위해서 Lazy Loading 기능을 이용합니다.

React 의 lazy() 함수 이용하기

React.lazy() 는 React 어플리케이션에서 코드 스플리팅을 간편하게 해주는 함수입니다.

스플리팅이란 큰 번들을 여러 작은 청크로 분할하는 프로세스로 웹 어플리케이션의 초기 로딩 시간을 줄이는데 큰 도움을 줍니다.

---

간단한 예시 코드 입니다.

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

function App() {
  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </React.Suspense>
    </div>
  );
}

MyComponent 를 실제로 필요하여 로드되기 전까지는 Suspense의 fallback prop에 지정된 컴포넌트나 요소가 화면에 표시됩니다.

---

실제 프로젝트에 적용해 보기

import React, {lazy, Suspense} from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";
import { RecoilRoot } from "recoil";
import { PropagateLoader }  from 'react-spinners';

const root = ReactDOM.createRoot(document.getElementById("root"));
const App = lazy(() => import("./App"))
root.render(
	<Router>
		<RecoilRoot>
			<Suspense fallback=
				{ 
  					<div className="loading_page"> 
  						<PropagateLoader color='#d72b76'/>
					</div>
  				}>
				<App />
			</Suspense>
		</RecoilRoot>
	</Router>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

위 코드는 실제 6주간 진행한 프로젝트에서 Lazy Loading을 사용한 예시입니다.

• 해당 코드는 index.js 파일로 React의 App.js 파일을 로드하는 index 파일을 수정하여 작성한 코드입니다.

App.js 페이지를 로드하여 모든 페이지를 로드하기 전까지는 Suspense fallback 에 작성된 loading_page가 로드됩니다.

이렇게 작성한 페이지의 속도는 개발자 도구의 네트워크 속도를 확인하여 개선사항을 확인해 볼 수 있습니다.

작성한 프로젝트의 크기가 커져 모든 페이지가 로딩되기까지 시간이 오래 걸린다면 반드시 알아 두어야 할 사항이다.

---

회고

• 실제 프로젝트에 적용하였던 Lazy Loading 의 사용법을 다시금 확인해 보았습니다.

• 해당 프로젝트는 퍼스널컬러 진단을 통해 자신에게 맞는 화장품과 화장법을 추천해 주며 SNS 기능과 쇼핑몰 기능이 합쳐진 복합 플랫폼 서비스 였습니다.

• React로 모든 페이지를 제작하였고 반응형 웹으로 제작하여 모바일 화면을 구현하였습니다.

• 해당 프로젝트는 첫 프로젝트로 다양한 시도를 하기위해 작성했던 프로젝트 였습니다.

• Lazy Loading, 무한스크롤, Optimistic Updates, 라우터 보안, AWS S3 bucket 접근 등등 다양한 기능을 사용하여 페이지 최적화를 위해 노력했던 프로젝트 입니다.
  페이지를 최적화 하며 SNS + 쇼핑몰 + 퍼스널컬러 진단 까지 합쳐져 6주간 약 50개의 웹페이지 화면을 제작하였던 프로젝트 입니다.

• 프로젝트 규모가 컷던 만큼 많은 프론트엔드 팀원들이 노력하였던 프로젝트로 프론트 팀장으로 최선을 다했던 프로젝트라 많이 기억되는것 같습니다.