props를 보냈는데 출력이 안 된다거나, 이미지를 넣었는데 안 보인다거나 등 버그 같은 게 생기면 개발자 도구를 켜서 Elements 탭을 살펴 보면 된다. 여기에서는 작성했던 코드가 실제 html, css로 변환되어서 보여진다.
그런데 컴포넌트로 미리 보고 싶으면 리액트 개발자 도구를 설치해서 보면 된다.
크롬 확장 프로그램 : React Developer Tools
https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
크롬 웹스토어에서 확장 프로그램 설치가 가능하다.
React Developer Tools을 설치하면 Components 탭이 생기는데, 개발 중인 리액트 사이트를 컴포넌트로 미리 볼 수 있다.
Components 탭의 왼쪽에서 컴포넌트 구조 파악이 가능하고, 오른쪽에서 state, props 등을 볼 수 있고 수정도 해 볼 수 있다.
Profiler 탭에서 성능 평가
Profielr 탭에 들어가서
- 녹화 버튼을 누르고
- 페이지 이동이나 버튼 조작을 해 본 다음
- 녹화 종료
하면 방금 렌더링된 모든 컴포넌트의 렌더링 시간을 측정해 준다.
느린 컴포넌트가 있다면 이렇게 범인을 찾을 수 있다.
<div>를 1만개 만들거나 그러지 않는 이상 보통의 경우 지연 원인의 대부분은 서버에서 ajax 요청 결과가 늦게 도착해서 그런 경우가 많기 때문에 걱정하지 않아도 된다.
크롬 확장 프로그램 : Redux Developer Tools
크롬 웹스토어에서 확장 프로그램 설치가 가능하다.
Redux store를 한 눈에 볼 수 있다.
Redus Stored에 있던 state를 전부 확인할 수 있고, state 변경한 내역도 알 수 있다.
lazy import
리액트 코드 작성이 끝나면 npm run build 명령어를 입력해서 코드들을 html, css, js 파일로 변환해야 한다.
그런데 리액트로 만드는 Single Page Application의 특징은 html, js 파일이 하나만 생성된다는 것이다.
그 안에 만든 모든 내용(ex-쇼핑몰 프로젝트의 App/Detail/Cart 등)이 들어 있어서 파일 사이즈가 크다.
그래서 리액트 사이트들은 첫 페이지 로딩 속도가 매우 느릴 수 있다.
이런 경우 js 파일을 잘게 쪼개면 로딩 속도를 향상 시킬 수 있다.
(App.js)
import Detail from './routes/Detail.js'
import Cart from './routes/Cart.js'이렇게 import 해 온 파일들을
(App.js)
import { lazy } from 'react'
const Detail = lazy( () => import('./routes/Detail.js') )
const Cart = lazy( () => import('./routes/Cart.js') )위와 같이 lazy 문법으로 바꾸면 된다.
lazy 문법을 사용하면 해당 컴포넌트가 필요해질 때 import 해 오라는 뜻이 된다.
그리고 이렇게 해 놓으면 컴포넌트 내용을 다른 js 파일로 쪼개 줘서 첫 페이지 로딩 속도를 향상 시킬 수 있다.
위처럼 lazy를 사용하면 당연히 컴포넌트 로드까지 지연 시간이 발생할 수 있다.
(App.js)
import { lazy, Suspense } from 'react'
const Detail = lazy( () => import('./routes/Detail.js') )
const Cart = lazy( () => import('./routes/Cart.js') )
function App() {
return (
<div className="App">
<Suspense fallback={<div>로딩중입니다</div>}>
<Route path="/detail/:id" element={
<Detail shoes={shoes} />
}/>
</Suspense>
</div>
);
}- Suspense를 import 한다.
- <Suspense>로 Detail 컴포넌트를 감싸면 Detail 컴포넌트가 로딩 중일 때 대신 보여줄 html 작성도 가능하다. 귀찮으면 <Suspense>로 <Routes> 전부를 감싸도 된다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
