[React] 성능개선 1 : 개발자도구 & lazy import

개발자도구

 

props 보냈는데 출력 안되는 경우,

이미지 경로 잘못되어서 이미지 출력 안나오는 경우 등 버그 생기면 개발자 도구를 확인해서 찾음

 

but 우리는 컴포넌트로 만드는데 개발자 도구에서는 일반 html로 나옴

컴포넌트 구조를 미리 보고싶으면 

크롬 웹 스토어에서 React Developer Tools 설치

 

 

개발자도구에 Components, Profiler 탭 생김

 

 

 

● Components - props, state 등 어떻게 반영되는지 확인

 

 

 

● Profiler - 성능저하되는 컴포넌트 범인 찾기

컴포넌트 렌더링 시간은 보통 빠름,

대부분의 지연원인은 ajax 요청임 - 서버에서 데이터 늦게오는 경우

 

 

---

 

lazy import - 메인페이지 로딩 속도 개선 가능

 

SPA(Single Page Application) 특징

하나의 큰 js파일에 모든 코드 다 들어가 있어서 유저가 메인페이지 접속하면 로딩 속도가 느림

React로 만든 사이트들은 기본적으로 로딩속도가 느린 특징이 있음

 

큰 js파일을 잘게 나누고 싶으면?

App.js 파일 가보면 컴포넌트들이 import 되어있음

근데 메인페이지 로딩할때 다른 컴포넌트들 로드할 필요 없음(메인페이지에서 컴포넌트들이 보이지 않으므로)

lazy 함수 사용해서 컴포넌트 필요해질때 import 해달라는 명령 가능 ( lazy 하게 로딩해주세요~)

 

 

1. import lazy

 

2. 기존에 import 컴포넌트 코드 지우고

 

3. lazy 함수 안에서 import 컴포넌트

lazy 함수 쓰면 사이트 발행할 때도 별도의 js 파일로 분리됨

 

 

● 단점

lazy함수 쓰면 사용자가 해당 컴포넌트 실행할때 로딩시간 발생

로딩되는 동안 안내문이나 로딩바 생성해주고 싶으면

Suspense 사용

 

 

1. import Suspense

 

 

2. <Routes> 전체를 <Suspense> 태그로 감싸고

태그안에 fallback 속성 입력 * fallback 속성안에 로딩중 보여주고 싶은 html 코드 작성