[React] React/Redux DevTools & lazy import로 성능개선

React / Redux DevTools

 

크롬 웹 스토어에 React Developer Tools 라는 확장 프로그램이 있다.

이걸 설치하면 다음과 같이 개발자 도구에서 html 말고

말그대로 내가 코딩한 component 들을 개발자 도구에서 확인이 가능하다.

state 나 props 도 볼 수 있어서 디버깅 할때 유용할 듯 하다.

Profiler 탭도 새롭게 생기는데

여기에서는 성능을 평가해볼 수 있다.

녹화 버튼을 누르고 성능을 테스트해보고 싶은 활동을 해본다음에

녹화를 끝내면

방금 렌더링 된 모든 컴포넌트들의 렌더링 시간을 측정해준다.

 

 

Redux DevTools 라는 확장 프로그램도 있다.

Redux를 사용할 때에 유용하게 쓰일 프로그램이다.

redux store 에 있던 state 를 전부 확인하고 dispatch 날릴때 뭐가 바뀌는지 로그를 작성해준다.

---

 

lazy import

 

나중에 리액트 프로젝트를 build 하면

html, js 파일이 하나만 생성되는데

여기에 지금까지 만든 모든 js 파일들,,, 이 들어가기 때문에 파일사이즈가 크다.

그래서 리액트 프로젝트는 첫 페이지 로딩속도가 느리다.

 

이걸 개선시키고 싶으면 쪼개면 된다.

import 문법을 고치는 방식인데 

지금은 메인페이지에서 다른 Detail, Cart 같은 js 파일을 import 해서 쓰고 있다.

(App.js)

import Detail from './routes/Detail.js'
import Cart from './routes/Cart.js'

이걸 처음부터 import 해오는게 아니라 나중에 import 해오도록 코드를 짜는 것이다.

(App.js)
import {lazy, Suspense, useEffect, useState} from 'react'

const Detail = lazy( () => import('./routes/Detail.js') )
const Cart = lazy( () => import('./routes/Cart.js') )

만약에 lazy import 사용하면 다른  컴포넌트 로딩하는데 시간이 걸릴 수 있다.

이럴때에는 Suspense 라는거 import 해서 그 컴포넌트를 감싸면

컴포넌트 로딩중일때 보여줄 html을 작성할 수 있다.

        <Route
            path="/detail/:id"
            element={
              <Suspense fallback={<div>loading...</div>}>
                <Detail shoes={shoes} />
              </Suspense>
            }
          ></Route>

이런식으로 Suspense 로 감싸준다.