props를 보냈는데 출력이 안되거나 이미지를 넣었는데 안보이는 버그같은게 발생하면 개발자 도구를 켜서 elements탭을 살펴보면되는데 여기선 html css로 변환돼서 보여짐 → 컴포넌트로 보고싶으면 리액트 개발자도구를 설치해서 켜보면됨
크롬 웹스토어에 들어가면 확장프로그램 설치가능
React Developer Tools 설치하면 Components탭이 생기는데 여기서 개발중인 리액트사이트를 컴포넌트로 미리볼수있음
왼쪽에서 컴포넌트 구조 파악가능 / 왼쪽상단에서 아이콘눌러서 컴포넌트 찍어보면 state, props 조회가능 수정도 가능
Profiler 탭에서 성능평가 가능
보통 지연원인 대부분은 서버에서 ajax요청결과가 늦게 도착해서 그런거라 신경쓸필요없음
크롬 웹스토어에서 설치가능 Redux store에 있는 state를 전부 확인가능
dispatch날릴 때마다 뭐가 어떻게 바뀐지 로그를 작성해줌 - store복잡해지면 유용
리액트로 만드는 Single Page Application의 특징은 html, js 파일이 하나만 생성됩니다.
그 안에 지금까지 만든 App / Detail / Cart 모든 내용이 들어있어서 파일사이즈가 좀 큽니다.
원래 그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있습니다.
그게 싫다면 js 파일을 잘게 쪼개면 됩니다.
쪼개는 방법은 import 문법을 약간 고치면 되는데
지금 메인페이지 보면 Detail, Cart를 import 해서 쓰고있습니다.
근데 잘 생각해보면 Detail, Cart 컴포넌트는 메인페이지에서 전혀 보이지 않고 있기 때문에
이런 컴포넌트들은 아래 문법으로 import 해놓으면 좋다
(App.js)
import Detail from './routes/Detail.js'
import Cart from './routes/Cart.js'
===아래처럼 변환===
(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컴포넌트가 필요해지면 import해달라고 작성
이렇게 작성해놓으면 Detail컴포넌트 내용을 다른 js파일로 쪼개주기때문에 첫 페이지 로딩속도를 향상시킬 수 있음
<Suspense fallback={ <div>로딩중임</div> }>
<Detail shoes={shoes} />
</Suspense>
lazy사용하면 당연히 Detail컴포넌트 로드까지 지연시간이 발생할 수 있음
Detail컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능
귀찮으면 <Suspense>
로 <Routes>
전부 감싸도 됨
컴포넌트가 재렌더링되면 해당 컴포넌트 안에 있는 자식컴포넌트는 항상 함께 재렌더링
평소엔 상관없지만 자식컴포넌트가 렌더링시간이 오래걸리는 무거운 컴포넌트면 자식을 memo로 감싸놓으면 됨
memo로 감싸놓은 컴포넌트로 전송되는 props가 변하거나 그런경우에만 재렌더링
사용법은 검색
단점 : memo로 감싼 컴포넌트는 헛된 재렌더링을 안시키려고 기존 props와 바뀐 props를 비교하는 연산이 추가로 진행됨 → props가 크고 복잡하면 이거 자체로도 부담이 되기 때문에 꼭 필요한 곳에서만 사용