React.lazy 와 Suspense 사용하기

-  [ React.lazy 의 기능 ]

lazy 함수는 구성요소를 개별 Javascript chunk로 분리하며 불필요한 요소들(컴포넌트)들을 다운받는 시점을 조절 할 수 있게해준다.  이를통해 불필요한 요소를 미리 다운받지 않게 하고 필요한 렌더링시점에서 비동기적으로 로딩하여 성능을 최적화 해줄 수 있다. 

사용하는 이유  

: react는 많은 요소와 라이브러리로 구성되어 있습니다. 

만약  import로 정의하고 동적으로 불러오기를 사용하게 되면 *에러가 발생되며 첫 페이지를 로드하는 즉시 대규모 단일 Javascript 번들이 사용자에게 전송되어 페이지 성능에 상당한 영향을 줄 수 있다.  lazy는 다운받는 시점과 chunk화를 통해 이를 개선할 수 있다. 

* 어떤 에러가 발생하는가?
import 구문을 코드의 최상단에 정의하면 '순환 의존성(Circular Dependency)' 에러가 발생될 수 있다.
순환 의존성 에러는 두 개 이상의 모듈이 서로를 참조하는 상황에서 발생한다. 
예를 들면 컴포넌트 A가 컴포넌트 B를 동적으로 불러오고, 동시에 컴포넌트 B가 컴포넌트 A를 참조한다면 순환 의존성이 발생되며 컴포넌트 불러오기 과정에서 에러가 발생하게 된다.

-  [ React.lazy 의 사용 예제 ]

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

function App() {
  const About = React.lazy(() => import('./About')); // 불러올 컴포넌트 경로 
  

  return (
   <Router>
    <Suspense fallback={<div>Loading...</div>}> // Suspense로 lazy 컴포넌트를 감싸야한다. 
   // * fallback : 컴포넌트가 로딩될때까지 보여줄 내용
      <Routes>
        <Route path="/" element=<About/>} />
      </Routes>
    </Suspense>
  </Router>
  );
}

사용하기에 앞서 lazy의 사용조건이 두가지 있다.
1.React 컴포넌트를 포함해야한다. 
2.Default export를 가진 컴포넌트여야 한다.가지 있다.

사용시 유의사항 : 
공식문서에 따르면  Router 바로 아래에 Suspense를 사용하고 그 아래에 Route로 보여줄 컴포넌트들을 React.lazy로 불러오는 것을 권장한다. 
만약 Suspense로 감싸지않으면 lazy함수 작동시 UI렌더링 에러로 인해 렌더를 일시정지하는 문제가 발생된다.

-  [Suspense ]

Suspense 는 React에서 비동기 작업을 관리하기 위한 기능으로  lazy 함수를 사용할 때, 렌더링 도중에 모듈 로딩이 실패하는 오류를방지할 수 있다.
이는 일부 데이터의 비동기 작업을 로드하는 동안 단순한 fallback 컴포넌트를 렌더화면으로 보여줄수 있으며 통신실패시에 대한 화면 처리도 가능하다.
또 다른 기능은 여러 구성 요소가 모두 지연 로드된 경우에도 로드에서 여러 구성 요소를 일시 중단할 수 있다고 한다.

-  [React.lazy 에 대한 정리]

장점과 단점

장점: 

- 초기 로딩 시간 감소:  lazy 함수를 사용하면 모든 컴포넌트를 처음에 로딩할 필요가 없기 때문에 초기 로딩 시간을 줄일 수 있습니다.
- 페이지 로딩 속도 향상: lazy 함수를 사용하면 필요한 컴포넌트만 로딩하기 때문에 페이지 로딩 속도를 높일 수 있습니다.
- 성능 향상: lazy 함수를 사용하면 초기 로딩 시간과 페이지 로딩 속도가 개선되어 전반적인 성능이 향상될 수 있습니다.

단점 & 유의점:

- 컴포넌트 로딩 시간: lazy 함수를 사용하면 컴포넌트를 사용하기 전에 로딩해야 하므로, 사용자가 컴포넌트를 사용하기 전까지는 로딩 시간이 필요하다.
 또한, 컴포넌트가 매우 큰 경우 로딩 시간이 더욱 길어질 수 있다.
- 모듈 로딩 문제: lazy 함수를 사용할 때, 렌더링 도중에 모듈 로딩이 실패할 수 있다. 이 경우, 컴포넌트를 렌더링하지 못하고 오류가 발생한다. 
이를 해결하려면 Suspense 컴포넌트를 사용하여 로딩 중일 때 보여줄 UI를 구현한다.
- 서버 사이드 렌더링: lazy 함수는 서버 사이드 렌더링에서는 지원되지 않는다. 이를 해결하기 위해서는 코드 스플리팅을 수동으로 구현해야 한다.