useMemo

memo()

import { useState } from 'react'

function Child(){
  return <div>랜더링이 느린 컴포넌트</div>
}

function Number(){ 
  const [count, setCount] = useState(0)

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

버튼을 누를 때마다 <Child / >가 재렌더링 돼 비효율적이다.

 

import { memo, useState } from 'react'

let Child = memo( function(){
  return <div>랜더링이 느린 컴포넌트</div>
})

function Number(){ 
  const [count, setCount] = useState(0)

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

memo로 해당 Child 컴포넌트를 감싸면 꼭 필요할 때만 재랜더링 되게 할 수 있다.

Child로 전송되는 propos가 변하거나 컴포넌트가 변화하는 경우에만 재렌더링이 된다.

 

memo로 감싼 컴포넌트의 기존 props와 바뀐 props를 비교하는 연산이 추가되므로 꼭 필요한 경우에만 사용한다.

 

useMemo()

import { useMemo } from 'react'

function operation(){
  return (오래 걸리는 연산)
}

function App(){ 
  const result = useMemo(()=>{ return operation() }, [])

  return <div>{result}</div>
}

useMemo()에 컴포넌트 로드시 1회만 실행하고 싶은 코드를 담는다.

시간이 오래걸리는 함수를 useMemo에 넣어두면 재렌더링마다 동작하지 않고 컴포넌트 로드시 1회만 실행된다. 

 

useEffect와 비슷하며 dependency도 넣을 수 있어 특정 state나 props가 변할 때만 실행도 가능하다.