React, React Develop Tools과 lazy import(성능개선)

React Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools

크롬 웹스토어로 크롬 확장프로그램 설치가 가능함

 

React Developer Tools 설치하면 개발자 도구에 Components 탭이 생기는데

개발중인 리액트사이트를 컴포넌트로 미리볼 수 있음

Components 탭에서 컴포넌트구조 파악을 할 수 있고 오른쪽으로 props, state 조회가능하고 수정해볼 수 있음

 

또한 Profiler 탭에 들어가

1. 녹화 시작
2. 페이지 이동이나 버튼조작
3. 녹화끝내기

하면 렌더링된 모든 컴포넌트의 렌더링 시간을 측정해줌

이것을 이용하여 느린 컴포넌트가 있다면 범인찾기 가능

보통의 지연 원인의 대부분은 서버에서 ajax 요청결과가 늦게 도착해서 그런 경우가 많기 때문에 크게 걱정할 필요는 없음

 

lazy import

리액트 코드를 완성하면 npm run build 입력해서 코드들을 Html, CSS, JS파일로 변환해야함

하지만 리액트로 만드는 Single Page Application의 특징은 Html, JS파일이 하나만 생성됨

그 안에 모든 내용이 들어있어서 파일사이즈가 좀 큼

그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있음

이런경우 JS파일을 잘게 쪼개면 로딩속도를 향상 시킬 수 있음

 

//App.js

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

이렇게 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해오라고 바꾸면 lazy문법으로 해놓은 컴포넌트들은 컴포넌트가 필요해질때 import해오라는 뜻이 되어

컴포넌트 내용을 다른 JS파일로 쪼개줌으로 첫 페이지 로딩속도를 향상시킬 수 있음

 

lazy에 대해 자세히 알아보면

React.lazy()는 import() 구문을 반환하는 콜백 함수를 인자로 받음

동적으로 불러오는 컴포넌트는 React 컴포넌트를 포함해야 하며 default export를 가진 컴포넌트여야 함

 

<Suspense fallback={ <div>Loading...</div> }>
  <Detail shoes={shoes} />
</Suspense>

lazy 사용하면 컴포넌트 로드까지 지연시간이 발생할 수 있음

Suspanse를 import 해온뒤 컴포넌트를 감싸면 컴포넌트가 로딩중일 때 대신하여 보여줄  Html 작성도 가능함

 

Suspanse에 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React element를 받아들임

Suspanse 컴포넌트는 lazy컴포넌트를 감싸는데 하나의 Suspanse컴포넌트로 여러 lazy를 감쌀 수 있음

lazy컴포넌트는 Suspanse컴포넌트 하위에서 렌더링되어야 함

 

return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element=<About/>} />
      </Routes>
    </Suspense>
);

React 공식문서에 따르면, Router 바로 아래에 Suspanse를 위치시키고 Route로 보여줄 컴포넌트들을 React.lazy로 불러오는 것을 권장함