👍 성능개선2

✔️ memo

컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링됩니다.
평소엔 별 문제가 없겠지만 자식컴포넌트가 렌더링시간이 오래 걸리는 컴포넌트라면 문제가 발생할 수 있습니다.

memo의 원리와 특징

기존props와 신규 props를 계속 비교해서, props가 변할때 만 재랜더링 합니다.
props가 길고 복잡하면 악영향을 미칠 수 있습니다.

import {memo, useState} from 'react' // 1. memo를 import하고

let Child = memo( function(){ // 2. 원하는 부분을 감싼다
  console.log('재렌더링됨')
  return <div>자식컴포넌트</div>
})

function Cart(){ 

  let [count, setCount] = useState(0)

  return (
    <Child /> // 4. memo로 감싸있기 때문에 버튼을 누르더라도 재랜더링 되지 않는다.
    <button onClick={()=>{ setCount(count+1) }}> + </button> // 3. 버튼을 누르게되면 원래 해당 Cart 컴포넌트에 하위 요소는 전부 재랜더링 되지만
  )
}

✔️ useMemo

컴포넌트 랜더링시 1회만 실행하는 코드입니다.
useEffect와 비슷합니다.
[ ] dependency 안에 있는 특정 state,props가 변경될때 마다 실행할 수 있습니다.

import {useMemo, useState} from 'react'

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

function Cart(){ 

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

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

useEffect와 차이점

차이점은 useEffect는 html이 전부 랜더링된 후 실행되고, useMemo는 html과 동시에 랜더링 되며 실행 시점의 차이가 있습니다.