React - 성능개선(개발자도구 & lazy import)

React를 이용해서 개발을 진행할때

이미지를 넣었는데 안보이는 버그같은게 생기면 

개발자도구를 켜서 Elements탭 살펴보면 되는데 여기선 짠 코드가 실제 html css로 변환되어서 보여집니다.

컴포넌트로 미리보고 싶으면 리액트 개발자도구를 설치해서 보면 됩니다.

 

 

React Developer Tools

크롬 웹스토어에 들어가면 설치가 가능합니다. 

설치를 하면 개발자도구에서 Components 탭이 생기는데 여기서 컴포넌트를 볼 수 있습니다.

컴포넌트구조파악이 가능하고 컴포넌트를 찍어보면 

해당 컴포넌트의 state, props 같은 것들 조회가능합니다. 수정해볼 수 도 있습니다. 

 

 

 

Profiler 탭에서 성능평가 가능

Profiler 탭 들어가서 

• 녹화버튼 누르고
• 페이지 이동이나 버튼조작을 해보고 
• 녹화를 끝내면

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

여기서 느린 컴포넌트가 있다면 범인을 찾을 수 있습니다.(<div>를 1만개 만들거나 그러지 않는 이상은 보통은 걱정할 필요는 없습니다 지연원인 대부분은 서버에서 ajax요청결과가 늦게 도착해서 그런경우임)

 

 

 

Redux Developer Tools

이것도 크롬 웹스토어에서 설치가능합니다. 

Redux store에 있던 state를 전부 확인가능합니다. 

그리고 dispatch 날릴 때 마다 뭐가 어떻게 바뀌었는지 로그를 작성해줍니다. (store복잡해지면 유용) 

아래의 화면에서 주문하기 버튼을 클릭하면 store에 데이터가추가됩니다. 

addStock이 동작되었다라고 알려주고 아래에서 어떤 데이터가 추가되었는지도 알려줍니다. 

그리고 State탭을 클릭하면

전체 State를 다 출력해줍니다.

 

 

lazy Import

리액트 코드를 다 짰으면 npm run build 입력해서 짯던 코드들을 html css js파일로 변환해야 합니다. 

근데 리액트로 만드는 Single Page Application의 특징은 html, js파일이 하나만 생성됩니다.

그 안에 지금까지 만든 App / Detail / Cart 모든 내용이 들어있어서 파일사이즈가 좀 큽니다. 

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

 

js파일을 잘개 쪼개위의 느려짐을 방지할 수 있습니다. 

쪼개는 방법은 아래와같습니다. import해놓은걸 

(App.js)

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

위에껄 아래처럼 바꾸면됩니다. 

해석해보자면 "Detail 컴포넌트가 필요해지면 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를 사용하면 당연히 Detail컴포넌트 로드까지 지연시간이 발생할 수 있습니다. 그럴 땐 

 

1. Suspense 라는거 import 해오고

2. Detail 컴포넌트를 감싸면 

Detail 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능합니다.

귀찮으면 <Routes> 전부를 감싸면 됩니다.