memo

왜 필요?

렌더링 할 때 부모 컴포 내의 자식 컴포도 함께 렌더링됨.
만약 자식 컴포넌트가 렌더링 시간이 1초씩 걸리는 무거운 컴포넌트라면 어떡할까?

function Child(){
  console.log('재렌더링됨')
  return <div>자식임</div>
} //렌더링 2초씩 걸린다고 가정.

function Cart(){ 

  let [count, setCount] = useState(0)

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

memo : 해당 컴포넌트가 변경될 때만 재렌더링 해주세요.

memo() 사용해보기

import {memo, useState} from 'react' // 1. memo 가져오기

let Child = memo( function(){
  console.log('재렌더링됨')
  return <div>자식임</div>
}) // 2. 해당하는 컴포넌트 감싸기

function Cart(){ 

  let [count, setCount] = useState(0)

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

let 컴포넌트명 = memo( function(){})

이렇게 메모로 감싸주면 자식 컴포넌트로 보내는 props가 변하는 경우
재렌더링이 일어난다.

memo는 무조건 좋다?

memo는 기본적으로 기존의 props와 바뀐 props를 비교하는 연산이 추가로 진행되기 때문에 props가 크고 복잡하면 부담이 될 수 있기 때문에 꼭 필요한 곳에만 쓰는 것을 권장함.

useMemo

useEffect와 비슷한 용도.

import {useMemo, useState} from 'react'

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

function Cart(){ 

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

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

컴포넌트를 로드시 1회만 실행하고 싶은 함수가 있다면 useMemo를 이용하면 된다.

또한 useEffect와 동일하게 의존성 배열 추가도 가능하다.

useEffect와 차이점이 뭔데?

useEffect는 렌더링이 모두 완료된 후 useEffect 내부 코드가 실행된다.

useMemo는 렌더링될 때 함께 실행된다.

잘 설명된 글
https://ui.toast.com/weekly-pick/ko_20190731