이유

자바스크립트는 위에서부터 한줄씩 읽어가는데
component 를 모두 로드 시켜놓고 실행이 된다. 하지만 많아지면 스크립트에도 무리가 가고 느려질 것이다.

그래서 컴포넌트가 필요해질 시점에 원하는 컴포넌트를 import 시켜 로딩을 원하는 타이밍에 맞게 할 수 있다.
그래서 나온것이 lazy, Suspense

사용법

import 먼저시키고

import React, { lazy, Suspense } from 'react';

전역변수에 lazy 로 로딩시킨다.

let Detail = lazy( () => import( './Detail' ) )

html 부분에 Suspense 로 감싸주고 fallback 에 로딩중일때 애니메이션이나 문구를 추가한다 (컴포넌트 추가 가능)

<Suspense fallback={<div>로딩중</div>}>
	<Detail shoes={shoes} setStock={setStock}></Detail>
</Suspense>

지금은 로딩 속도가 빠르기 때문에 로딩중이라는 메세지가 표시되는지 확인하려면 개발자도구를 설치해야한다.