Section4 Unit3 [React] 심화 - 코드분할과 React.lazy() & Suspense

---

Section4 Unit3 [React] 심화 - Code Spliting, React.lazy() & Suspense

 

📌 Chapter3. React의 주목해야 할 기능

 주목해야 할 기능인가? 오늘 QnA 세션에서 외부 강사님이 Suspense는 잘 사용하지 않는다고 하시긴 했다만...😐

 여튼, 무거워진 리액트 앱의 성능을 최적화하는 것은 중요한 일임은 틀림없다. 이 부분은 좀 더 공부를 해봐야 할 것 같지만, 우선 배운 내용들만 간단히 정리해보자면 아래와 같다. 

 

• React는 SPA(Single-Page-Application)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다. React.lazy 함수를 사용해 컴포넌트를 동적으로 import를 할 수 있고, 이를 사용하면 초기 렌더링 지연시간을 어느 정도 줄일 수 있게 된다.

import Component from './Component';

/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import('./Component'));

React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 한다.

 

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

 

 라우터가 분기되는 컴포넌트에서 각 컴포넌트에 React.lazy를 사용하여 import하고, Route 컴포넌트들을 Suspense로 감싼 후 로딩 화면으로 사용할 컴포넌트를 fallback 속성으로 설정해 주면 된다. 초기 렌더링 시간이 줄어드는 분명한 장점이 있으나 페이지를 이동하는 과정마다 로딩 화면이 보이기 때문에 서비스에 따라서 적용 여부를 결정해야 한다.

 

 

👍🏻 리액트 공식문서를 보니 설명과 과정이 자세히 나와 있어서 이해하는데 도움이 되었다.

lazy – React

---

🌙  오늘의 회고

 매일 짧게라도 하루를 마감한 소감을 쓰려고 하는데, 요즘은 해야할 공부가 더 많아진 것 같아서 회고쓸 시간도 없는 것 같다. 정신없이 하다보면 어느덧 새벽..🫠 리액트 심화에 들어가니 더 재미있기는 한데, 익숙치 않은 개념이라 적응하고 활용할 시간이 필요한 것 같다. 솔로 프로젝트도 마무리하려 했는데, 다시 건드리지도 못하고 있는 중이다. 주말동안 가능할까? 벌써 수요일이 지나가다니.