React DevTools (크롬 확장 프로그램)
- 크롬 웹스토어에서 React Developer Toolsd 설치하면
개발중인 리액트 사이트를 컴포넌트로 미리 볼 수 있음 - 크롬 웹스토어 : https://chrome.google.com/webstore/
Profiler 성능 측정
- 왼쪽에 있는 녹화버튼 눌러서 녹화하고, Profiler 누르면 막대그래프로 컴포넌트들의 렌더링속도를 볼 수 있음 --> 성능 저하 부분 파악 가능
- 보통은 걱정 안해도 됨
- 대부분의 지연시간은 서버에서 데이터가 늦게와서 일어남
Redux DevTools
- store 한눈에 보여줌
- state 변경한 내역 알려줌
lazy import
: 필요해질때 import 해주세요
- Single Page Application 특징
- 발행하면 js 파일 하나에 모든 코드가 다 들어가 있음
- 유저가 메인페이지 접속하면
- html 파일
- css 파일
- 큰 js파일 다운받음
--> 속도가 느림 --> js파일을 잘게 분할하자! --> lazy import 이용
위 코드는 메인페이지 로딩할때 로드할 필요 없음
이렇게 lazy import 이용해줘서 필요할때 import 할 수 있도록 해준다
-> 자원 절약 가능
사용하기 위해서는 상단에서 lazy import는 필수
단점
: Cart, Dtail 컴포넌트 로딩시간 발생
-> 로딩되는 시간에 안내문 띄워주고 싶다면? Suspense 이용
Suspense
- import 하고 < Suspense >로 감싸면 로딩중 UI 넣기 가능
- 보통 Route들을 lazy 하게 로딩하도록 하는 경우가 많기 때문에
Routes 전체를 Suspense로 감싸도 됨
memo (꼭 필요할때만 재랜더링 될 수 있도록 해주는 함수 )
: 자식컴포넌트 재렌더링 막기
원리
props가 변할 때만 재렌더링 해줌
- Cart function 안에 button이 있기 때문에 Cart 재랜더링시 자식들도 전부 재랜더링됨
- 이렇게 memo함수를 사용하면 다른 함수가 재렌더링 되더라도
자식컴포넌트들은 꼭 필요할때만 재렌더링됨!
결론
memo로 재렌더링 오래걸리는 컴포넌트 감싸놓으면 좋음
useMemo
: 컴포넌트 렌더링시 1회만 실행해줌
[state] --> state가 변화할때만 실행한다는 의미
useMemo, useEffect 차이 (실행 시점의 차이)
-
useMemo : 렌더링 될 때 같이 실행됨
-
useEffect : HTML 다 보여주고 useEffect 실행됨
batch 기능
state1 변경()
state2 변경()
state3 변경()
이럴 경우 state 변경함수 실행될 때마다 재렌더링 되는게 아니라
state3 변경()부분에서만 재렌더링 1회가 일어남 = 마지막에 딱 한번만 재렌더링 일어남
업데이트 전엔 ajax, setTimeout 내부에서 batching이 일어나지 않았는데,
리액트 18버전 이후 부터는 어디에 있든 재렌더링은 마지막에 1번만 됨
- batching 되는게 싫고, state 변경함수 실행마다 재렌더링 시키고 싶다면
flushSync함수 사용하기
useTransition
: 느린 컴포넌트 성능 향상 가능
(카드 빚 돌려막기랑 비슷)
input에 유저가 무언가 입력하면
e.target.value에는 유저가 입력한 값이 남음
name에 저장되게 해주세요
import {useState} from 'react'
let a = new Array(10000).fill(0)
function App(){
let [name, setName] = useState('')
return (
<div>
<input onChange={ (e)=>{ setName(e.target.value) }}/>
{
a.map(()=>{
return <div>{name}</div>
})
}
</div>
)
}위 코드는 의도적으로 재렌더링이 느린 컴포넌트를 만든 코드임
import {useState, useTransition} from 'react'
let a = new Array(10000).fill(0)
function App(){
let [name, setName] = useState('')
let [isPending, startTransition] = useTransition()
return (
<div>
<input onChange={ (e)=>{
startTransition(()=>{
setName(e.target.value)
})
}}/>
{
a.map(()=>{
return <div>{name}</div>
})
}
</div>
)
}이럴때 useTransition() 쓰면 그 자리에 [변수, 함수]가 남음
그래서 < input > 타이핑같이 즉각 반응해야하는걸 우선적으로 처리해줄 수 있음
isPending
: startTransition() 으로 감싼 코드가 처리중일 때 true로 변하는 변수
{
isPending ? "로딩중 기다리세요" :
a.map(()=>{
return <div>{name}</div>
})
} useDeferredValue
: startTransition()랑 용도가 같음
state 아니면 변수 하나를 집어넣을 수 있게 되어있음
그 변수에 변동사항이 생기면 그걸 늦게 처리해줌
useDeferredValue 안에 state를 집어넣으면 그 state가 변동사항이 생겼을 때 나중에 처리해줌
그리고 처리결과는 let state에 저장해줌
