React / lazy, Suspense

 

React에서는 SPA(Single Page Application)으로 구현되고 있기 때문에 사용하지 않는 컴포넌트도 불러오고 있다. 이로 인해 렌더링 시간이 길어질 수 있는 문제점이 발생한다. 

이러한 문제점을 해결하기 위해 lazy와 Suspense가 사용된다.

 

lazy

컴포넌트를 바로 불러오지 않고 실제로 그 컴포넌트가 필요할 때 불러온다.

lazy의 인자로 import 함수를 전달하고, 컴포넌트를 반환한다.

* lazy는 보통 모듈의 최상위 수준에서 선언되어야 렌더링 시 모든 상태가 재설정되는 현상을 막을 수 있다

// 기존 import 방식
import Main from "./Main.jsx"

// lazy 사용 시
const Main = lazy(()=>import("./Main.jsx"));

 

Suspsense

lazy를 통해 import를 하는 동안 화면에 대체 UI를 보여주는 컴포넌트로, 대체되는 임시 화면을 fallback의 값으로 넣어주면 fallback이 대신 렌더링된다.

로딩이 끝나면 자식 컴포넌트 (import하려는 lazy의 컴포넌트를 자식 컴포넌트로 넣어줘야한다.)가 렌더링되는 패턴이다. 

<Suspense fallback={"로딩중"}><Main /></Suspense>

 

 

 

 

---

 

 

 

예시

 

이전에 실습했던 동물좋아 프로젝트를 lazy, suspense로 수정했다... https://hydeveloper.tistory.com/195 

 

먼저 기존 Import문을 lazy를 사용해 수정했다.

/* // 이전 방식
import Main from './page/Main';
import Detail from './page/Detail';
import Search from './page/Search';
*/

// lazy 사용
const Main = lazy(() => import('./page/Main'));
const Detail = lazy(() => import('./page/Detail'));
const Search = lazy(() => import('./page/Search'));

 

 

그 다음, Routes로 구성되고 있는 이전 방식에서 Suspense를 추가하고자 한다.

 

function App() {
  return (
    // 생략.... 
    // 이전 방식
      <Routes>
        <Route path="/" element={<Main />}></Route>
        <Route path="/detail/:id" element={<Detail />}></Route>
        <Route path="/search" element={<Search />}></Route>
      </Routes>
  )
}

 

되게 간단한데, Suspense 컴포넌트를 생성 후 Routes를 자식 컴포넌트로 넣어주면 된다.

 

  <Suspense fallback={<h1>Loading...</h1>}>
    <Routes>
      <Route path="/" element={<Main />}></Route>
      <Route path="/detail/:id" element={<Detail />}></Route>
      <Route path="/search" element={<Search />}></Route>
    </Routes>
  </Suspense>

 

 

이제 확인을 해보려고 하는데

개발자 도구에서 다음과 같이 네트워크 제한으로 설정해 임의의 상황을 만들어낼 수 있다고 한다..!!

 

네트워크 탭에 들어가서 네트워크 제한을 해줄 수 있다.... 영어로는 제한없음이 No throttling이라고 뜰 것

 

 

나는 일단 로딩창을 보기위해 네트워크 제한을 느린 4G로 설정했다. (3G는 너무 느림... 옛날엔 그 네트워크로 어떻게 살았었지..)

그리고 캐시가 남아있을 지 모르니, 새로고침 아이콘에 마우스 오른쪽 클릭을 하면 캐시 비우기 및 강력 새로고침을 할 수 있어서 확인해봤다.

 

 

 

그리고 소스 탭을 가서 실제로 어떤 컴포넌트들이 불러와졌는지 확인해볼 수 있다.

 

왼쪽이 기존 방식, 오른쪽이 lazy + Suspense로 수정 후

 

lazy와 Suspense 도입 후 실제로 지금 표시되고 있는 Main.jsx만 가져오고 있는 것을 확인할 수 있다.

상세 페이지를 누르면 그때 Detail.jsx가 추가되고, 검색 기능을 사용해야 Search.jsx가 추가되고 있는 것을 볼 수 있다.