[코딩애플;React]성능개선 : 개발자도구 & lazy import/memo & useMemo

1. 크롬 확장 프로그램 : React Developer Tools

https://chrome.google.com/webstore/

Chrome 웹 스토어

여기서 설치하면 개발자 도구에서 컴포넌트 단위로 확인이 가능함.

state,props도 조회가능하고 수정도 가능

 

2.Profiler 탭

-녹화버튼을 누르고 페이지 이동이나 버튼 조작한 후 녹화를 끝내면

방금 랜더링 된 모든 컴포넌트의 랜더링 시간을 측정해줌.

비정상적으로 느린 컴포넌트 등 지연의 원인이 되는 것을 찾아낼 수 있다.

 

3.Redux Developer Tools

-이것도 크롬 웹스토에서 설치 가능함.

Redux store에 있던 state를 전부 확인 가능하다

store 복잡해지면 유용.

 

4.lazy import 

당장 불러올 필요 없는 컴포넌트를 늦게 불러 오게해서 첫페이지 로딩속도를 올릴 수 있다.

 

(App.js)

import {lazy, Suspense, useEffect, useState} from 'react'

const Detail = lazy( () => import('./routes/Detail.js') )

const Cart = lazy( () => import('./routes/Cart.js') )

 

-로딩이 지연될 때 대신 보여줄 html 작성하는 법

<Suspense fallback={ <div>로딩중임</div> }>

<Detail shoes={shoes} />

</Suspense>

 

요렇게 Suspense 라는 것 import해오고 해당 컴포넌트 혹은 해당 Routes를 감싸준다.

 

 

5. 자식 컴포넌트가 랜더링에 걸리는 시간이 오래 걸리는 경우

function Child(){

    console.log('재렌더링됨')

    return <div>자식임</div>

  }

 

  function Cart(){

 

    let [count, setCount] = useState(0)

 

    return (

      <Child />

      <button onClick={()=>{ setCount(count+1) }}> + </button>

    )

  }

 

 

1)memo()로 불필요한 재랜더링 막기

-react 라이브러리에서 memo import한 후 원하는 컴포넌트 정의 부분을 감싸서 사용함.

 let 컴포넌트며 = fucntion(){}

-> child로 전송되는 props가 변하는 경우같이 필요한 경우에만 재랜더링 됨.

->기존 props와 바뀐 props를 비교하는 연산이 추가되므로 크고 복잡한 props는 부담이 될 수 있음.

let Child = memo( function(){

    console.log('재렌더링됨')

    return <div>자식임</div>

  })

 

  function Cart(){

 

    let [count, setCount] = useState(0)

 

    return (

      <Child />

      <button onClick={()=>{ setCount(count+1) }}> + </button>

    )

  }

 

 

2)useMemo 

-useEffect와 비슷한 용도. 컴포넌트 로드시 1회만 실행하고 싶은 코드가 있을 때 사용.

import {useMemo, useState} from 'react'

function 함수(){

  return 반복문10억번돌린결과

}

function Cart(){

  let result = useMemo(()=>{ return 함수() }, [])

  return (

    <Child />

    <button onClick={()=>{ setCount(count+1) }}> + </button>

  )

}

 

-예를들어 반복문을 10억번 돌리는 등의 연산이 오래걸리는 경우엔 useMemo 안에 넣어두고 1회만 실행되도록 한다

dependency도 넣을 수 있어서 특정 state, props가 변할 때만 실행할 수도 있다.