React - 개발자 도구 & lazy import

개발자 도구 React Developer Tools

react 로 짠 코드인데 html 코드를 보면서 디버깅하는 것이 불편할 수 있는데 React Developer Tools 을 사용하면 Component 로 볼 수 있어서 디버깅을 편리하게 할 수 있습니다.

크롬 웹 스토어에 들어가서  React Developer Tools 를 설치합니다.

 

설치하고 나면 개발자 도구에 Componet 라고 보일겁니다.

• 이 기능을 사용하면 해당 컴포넌트의 구조, props, state, hooks 등 여러가지 정보를 한눈에 볼 수 있어서 편리합니다.

 

또 하나의 기능으로 profiler 라고 있습니다. 이 기능은 성능이 저하되는 컴포넌트를 찾을 때 사용합니다.

• 왼쪽 상단에 녹화 버튼을 누르고 이 페이지 저 페이지 막 이동을 합니다.

 

• 그리고 나서 녹화를 끝내면 아래와 같은 화면이 보입니다.

 

• 여기서 이제 컴포넌트들을 눌러보면서 속도가 저하되는 컴포넌트를 찾아보시면 됩니다.

 

• 일부러 for 문을 10억번 돌려서 성능을 저하시켜서 찾아봤습니다.

 

• 그러나 일반적으로 성능저하를 일으키는 부분은 대부분 ajax 요청 부분일겁니다.

 

성능을 향상시키는 방법

react 는 Single Page Application 입니다.

 

Single Page Application 의 특징

아래의 명령어로 발행할 수 있습니다. ( 서버에 올리기 위한 작업 )

npm run build

 

이렇게 발행을 하면 하나의 큰 js 파일 하나와 html, css 파일로 구성되어질 것입니다. 그렇게 되면 하나의 js 파일에 모든 js 코드들이 다 들어가게 되서 사이즈가 매우 커집니다. 그래서 유저가 사이트에 처음 접속할 때 그 큰 js 파일을 다운로드 받아야하기 때문에 로딩속도가 좀 느릴 수 있습니다. 그래서 js 코드를 잘게 분해하고 싶다 그럴 때는 아래와 같이 코드를 작성해주시면 됩니다.

 

지금 당장 필요없는 페이지들은  lazy 함수를 사용해서 import 시킵니다. ( lazy 의 의미는 필요해질 때 import 하라는 의미입니다. )

• App.js

 

근데 lazy 를 썼을 때 단점이 있습니다. 처음에 접속할 때 모든 파일을 import 해두지 않았기 때문에 lazy 로 import 한 페이지들에 접속할 때는 로딩을 해야 하므로 지연시간이 발생할 수 있습니다.

 

이렇게 로딩시간이 발생할 때 뭔가 안내문이나 로딩 바 같은 것들을 띄워줄 수도 있습니다.

• Suspense 를 import 합니다.

 

• 그리고나서 해당 컴포넌트 를 Suspense 태그로 감싸주면 됩니다.

 

• 그런데 대부분 Routes 안에 있는 모든 컴포넌트를 lazy 로드하게 만들기 때문에 Routes 전체를 Suspense 태그로 감싸도 될 것 같습니다.