React - SideProject 쇼핑몰 (8) - useMemo, memo

부모 컴포넌트가 재렌더링 되면 

자식 컴포넌트들도 전부 재렌더링 되는데 

자식 컴포넌트들 중에 렌더링 시간이 오래걸리는 게 있으면 

지연시간이 발생된다 

 

이때, 

꼭 필요할 때만 자식 컴포넌트를 렌더링 할 수 있는 방법 ! 

import {memo, useState} from 'react'

let Child = memo( function(){
  console.log('재렌더링체크')
  return <div>자식 컴포넌트</div>
})

function Cart(){ 

  let [count, setCount] = useState(0)

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

memo로 감싸져있기 때문에 재렌더링이 되지 않는다 

 

memo의 원리 

: props가 변할때마다 재렌더링 해줌 

 

useMemo

:컴포넌트 렌더링 시 1회만 실행해줌 

 

useEffect vs useMemo

: useEffect는 html이 먼저 실행되고 나서 실행시켜줌 

:  useMemo는 렌더링 될때 같이 실행이 됨 

-> 두가지는 실행시점의 차이만 있음