성능 개선

크롱·2023년 7월 4일

lazy import useDeferredValue useMemo useTransition

React 인강

목록 보기

5/7

🌈 개발자도구

Profiler

근데 보통 컴포넌트가 느리다면 ajax 요청한 서버 api가 이상할 가능성이 큽니다.

Redux DevTools

크롬에서 설치하면 redux 스토어, 변경함수 다 알려줍니다.

🌈 lazy-import와 Suspense

상단에서 lazy import해와여합니다.

하지만! 단점도 있는데, Detail 페이지에 접속할때 잠시 로딩될수도있다.
해결방안 -> Suspense

<Suspense>태그로 전체 routes 태그를 감싸준다.

🌈 재렌더링 막는 memo

많이 쓰일 일은 없지만...

자식컴포넌트의 재랜더링을 막고싶엉!

컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링됩니다.
평소엔 별 문제가 없겠지만 자식컴포넌트가 무거운 컴포넌트라면...?
그럴 땐 자식을 memo로 감싸놓으면 됩니다. !!!

memo는 props가 변할때만 재렌더링해줍니다.

단점: props가 길고 복잡하면 memo쓰는게 손해일수도.
why? 👀 memo로 감싼 컴포넌트는 헛된 재렌더링을 안시키려고
기존 props와 바뀐 props를 비교하는 연산이 추가로 진행됩니다.
props가 크고 복잡하면 이거 자체로도 부담이 될 수도 있습니다.

🍄 예제

버튼을 누르면 Cart 컴포넌트가 재렌더링된다.
부모 Cart 컴포넌트가 재렌더링될시 자식 Child컴포넌트도 재렌더링이된다.
자식컴포넌트가 꼭 필요할때만 재렌더링 하라고 말하고싶다면
===> memo 로 컴포넌트 감싸기!

memo는 props가 변할때 재렌더링 해준다고 했죠?

이렇게 Child 컴포넌트에 count 프롭스를 넘겨주고, 버튼을 누르면 count 프롭스가 변하므로 이땐 Child 컴포넌트를 재렌더링 해줍니다.

🌈 useMemo

useEffect와 비슷합니다!

useMemo 안에 넣어두면 컴포넌트 로드시 1회만 실행됩니다.
재렌더링마다 동작안함.

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

import {useMemo, useState} from 'react'

function 함수(){
  return 반복문10억번돌린결과
}

function Cart(){ 

 // let result = 함수()  <--원래 Cart가 재렌더링 될때마다 실행됨
 ✨  let result = useMemo(()=>{ return 함수() }, []) ✨

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

useMemo, useEffect랑 뭐가다른가요?

useEffect 는 html에 보여주는, return문이 다 끝나면, 그때 useEffect가 실행이된다.
useMemo는 렌더링될때 같이 실행이된다. 즉, 실행 시점의 차이!

🌈 useTransition

예를들어 state변경함수가 성능저하를 일으킨다면 , startTransition() 함수로 state변경함수 같은걸 묶으면 묶여진코드를 다른 코드들보다 나중에 처리해줍니다. 그래서 빨라지는것처럼 보입니다.

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>
  )
}