[성능개선] 개발자 도구 확장 프로그램, lazy import

props를 보냈는데 출력이 안되거나 이미지가 안나온다

-> 코드 확인 or 개발자 도구

 

---

 

0. 개발자 도구로 컴포넌트 확인하기

• 크롬 웹스토어 >검색창에 React Developer Tools > 설치 > 개발자도구의 탭 중 Components
  + 리덕스 확인은 Redux DevTools

 

 

* Single Page Application 특징

• 발행하면 js파일 하나에 모든 코드를 다 넣음 - 사이즈 매우 큼
• 사용자가 메인페이지에 접속시 파일 다운로드 순서
  1. HTML 파일
  2. CSS 파일
  3. 하나로 만든 큰 JS파일

...을 다운 받기때문에 리액트로 만든 페이지는 대체로 로딩 속도가 좀 느림

 

 

1. 3번의 이 JS 파일을 쪼개기 - lazy import

• 해당 파일이 필요할 때 import 해옴
• ❗ import 코드들 사이에 사용하면 안 됨

import { lazy } from 'react';
// import Detail from './pages/Detail';
// import Cart from './pages/Cart.js'
const Detail = lazy(() => import('./pages/Detail.js'));
const Cart = lazy(() => import('./pages/Cart.js'));

-> lazy import 한 것들은 사이트 발행할 때도 별도의 js파일로 분리됨

 

 

lazy import 단점

• 해당 파일에 있는 컴포넌트의 로딩시간이 발생 ex) Cart 페이지에서 Cart 컴포넌트 로딩이 오래걸림..
• -> 로딩 되는 동안 로딩바 띄우기 - Suspense

import { Suspense } from 'react';
...
function App() {
	...
    return (
      <div className="App">
      ...
      <Route path="/Detail/:id" element={ 
          <Suspense fallback={<div>Loading...</div>}> {/* Suspense 사용할 곳에 태그 감싸기 */}
            <Context1.Provider value={ {stock, shoes} }>
              <Detail shoes={shoes}/>
            </Context1.Provider>
          </Suspense>
        }/>

 

* 모든 페이지에 페이지 로딩중 시 문구 띄울거면 <Routes> 전체를 감싸도 좋을 것 같다!