React component, preload 로 최적화 하기

하려는 것

dynamic import로 적절한 시기에 preload 하여 불필요한 스크립트 로드를 죄소화해보자

 

적절한 시기란

 - 버튼을 클릭 하기 전. 즉 버튼을 hover 했을 때 (로드할 스크립트 커서 생각보다 느리다면 비 추천)

 - 컴포넌트가 마운트 된 이후 즉, 로딩을 최대한 늦추는 것이 목적

 

hover 되었을 때

onMouseEnter function

 

컴포넌트가 마운트 된 이후

useEffect(() => { 
// 여기서 dynamic import
}, [])