성능 최적화 : React Dev Tool, React.lazy

react dev tools 설치 → components, profiler tab

• 디버깅툴 : react dev tool : chrome, npm i redux-devtools-extension → composeWithdevTools → 크롬 개발자 도구 → redux (state action 디버깅을 쉽게 가능)
• profiler : 랜더링, 리랜더링 분석 가능
  • setting → profiler → record → 클릭 → 녹화 멈춤
  • 회색요소 → 랜더링 되지 않은 요소
  • 노란색이 많을 수록 오래 걸린다.
  • why did this render로 볼 수 있다.

 

번들 사이즈 줄이기 → lazy → 필요한것만 다운로드

• 서버에서 한번의 큰 js 사이즈를 브라우져에 전달 → 다운로드 시간이 오래 걸림
• 작은 사이즈로 여러개 쪼개서 하나씩 전달 → 유저는 일단 하나를 보고있는 중 → 계속 전달
• npm run build → .js의 파일 크기를 알 수 있음.
• lazy를 쓰면 보이는 화면 이외의 Router에 대해서는 아직 로딩을 하지 않은 상태
• mainPage에서 login을 누르면 loginPage를 다운로드받고, lazy로 되어있어서 그동안은 suspense의 로딩스피너가 돈다.
• 이미 다운로드 된거는 빠르게 나타난다. network 3g로 확인해볼 수 있다.

 

최적화 예시1)

• 느린 이유 → useState 변경 → SlowComponent도 재랜더링 → 10만개 컴포넌트 → 느림
• 해결방법
  • SlowComponent를 {children}으로 외부에서 전달받기
  • Test에서 useState에서 독립적이므로 재랜더링하지 않는다.
  • (SlowComponent가 useState을 받는다면 재랜더링된다)

 

최적화 예시2)

번들 : 자바스크립트 총 파일 → 한번에 다운받으면 오래 걸림

lazy를 사용해서 해당 컴포넌트를 동적으로 가져옴 → 다 안가져오기 때문에 첫 데이터는 빠르다.

import React, { Suspense } from 'react';

// Lazy-loaded component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      
      {/* Suspense를 사용하여 로딩 시 보여줄 fallback을 설정 */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;