React.lazy()와 React.Suspense()

React.lazy

보통 우리는 페이지 최상단에 파일이나 패키지를 import해서 사용하지만 동적 import()를 통해 코드 분할을 시도할 수 있다

// lazy() 사용법
const About = React.lazy(() => import('./About'));

React.lazy는 import 구문을 반환하는 콜백 함수를 인자로 받습니다
동적으로 불러온 컴포넌트 파일에는 반드시 지켜줘야하는 두 가지 규칙이 있는데,

1. React 컴포넌트를 포함해야 합니다
2. default export를 가진 컴포넌트여야 합니다

React.Suspense (v18)

컴포넌트의 랜더링을 어떤 작업이 끝날 때까지 잠시 중단시키고, 다른 컴포넌트를 먼저 랜더링할 수 있다

이 작업이 꼭 어떠한 작업이 되어야 한다는 특별한 제약 사항은 없지만, 만약 어떤 작업이 되어야 한다면 Rest API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 작업을 가장 많이 하고 있지 않았나?

<Suspense fallback={<Loding />}> 
// 2. 특정 작업이 되는 동안 보여질 컴포넌트를 fallback으로 넘기기
	<Component /> // 1. 이 컴포넌트는 특정 작업 이후에 보여질 컴포넌트
</Suspense>

예를 들면 A라는 컴포넌트는 비동기로 API를 호출하는 컴포넌트고, B 컴포넌트는 수신 상태에 알맞게 UI를 제공하는 컴포넌트라고 가정했을 때 사용자 측면에서 UI가 폭포처럼 쏟아지는 현상을 waterfall(폭포) 현상이라고 합니다

이 현상은 한 페이지에 여러 컴포넌트가 동시에 비동기 데이터를 읽어올 때, 상위 컴포넌트의 데이터 로딩이 끝나야지만 하위 컴포넌트의 데이터 로딩이 시작될 수 있기 때문에 발생합니다

if 조건문을 사용하여 어떤 컴포넌트를 보여줄지 제어하는 것은 명령형 코드에 가깝기 때문에 선언적 코드를 지향하는 React의 기본 방향성과 맞지 않게 느꼈다 (추가 참고 자료: 선언적 프로그래밍)

Suspense 참고 자료 : https://www.daleseo.com/react-suspense/

React 권장 사항

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

참고 문서 : https://ko.reactjs.org/docs/code-splitting.html