쇼핑몰 프로젝트(lazy loading / React devtools)

코딩애플 님의 강의를 바탕으로한 글입니다:)

일반적으로 다른 파일의 컴포넌트를 가져다 쓸 때 다음과 코드의 형식으로 import해왔다.
하지만, 다음과 같은 방식은 App.js라는 메인페이지에 방문 시 Detail,Cart등을 모두 import 해온다. 만약 수많은 컴포넌트들이 import 해오면 사이트 초기 접속속도가 느려질 수 있다.

(App.js 상단)
import React, {useState, useContext} from 'react';
import Detail from './Detail.js';
import Cart from './Cart.js'

따라서 사용하는 것이 lazy 와 suspense 이다.

Lazy & Suspense

1. react 라이브러리에서 lazy, Suspense를 import 해온다.

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

2. import Detail 하던걸 lazy 함수를 이용해 저렇게 바꿔줍니다.

let Detail = lazy(()=>{ return import('./Detail.js')  }); // import Detail from "./Detail";
let Cart = lazy(()=>{ return import('./Cart.js')  }); // import Cart from './Cart'
let Data = lazy(()=>{ return import('./data.js')  }); // import Data from "./data";

3. Suspense 라는 컴포넌트로 Detail(import해온 컴포넌트)을 감싸줍니다.

<Suspense>
    <Detail/>
  </Suspense>

4. fallback 속성엔 Detail 컴포넌트 로딩 전까지 띄울 원하는 HTML을 적어줍니다.

<Suspense fallback={ <div>로딩중입니다~!</div> }>
    <Detail/>
  </Suspense>

React Dev Tools

크롬확장프로그램으로, 디버깅할때 현재 페이지들에 대한 정보가 나열되고, props, hook, state들에 대한 정보 또한 볼 수 있다.

components

• 그래서 props가 잘 전해졌는지 확인
• state가 잘 변하고 있는지 확인
• 실시간 state, props 수정해보기
• 시계모양 버튼을 눌러 해당 컴포넌트 렌더링을 잠깐 정지해보기
  

Profiler
녹화버튼을 누르면 컴포넌트 렌더링 속도를 측정 가능

• 어떤 컴포넌트가 렌더링 시간이 젤 오래걸리는가
• 쓸데없이 재렌더링 자주되는 컴포넌트가 있는가
• 렌더링 필요없는 컴포넌트가 있는가