[React] 불필요한 재 렌더링을 막으려면 memo, useMemo

리액트에서 컴포넌트가 재 랜더링되면 안에 있는 자식 컴포넌트도 항상 함께 재랜더링된다.
이것은 리액트의 특징인데,
만약 자식컴포넌트의 랜더링 시간이 무거운 컴포넌트라면, memo 함수를 통해 재랜더링을 막아줄 수 있다.

memo()

import { memo, useEffect, useMemo, useState } from 'react';

let Child = memo( function (props){
  useEffect(()=>{
    console.log("Child")
  })
  return <div>child</div>
})

function Cart(){
  return (
    <div>
      <Child></Child>
    </div>
  )
}

memo 함수에 들어있는 함수는 꼭 필요할때만 재 랜더링 된다.
꼭 필요할 때란? Child 컴포넌트에 전달되는 props가 변할 때
하지만, 이전 props와 바뀐 props를 비교하여 재 랜더링을 하기 때문에 전달되는 props의 크기가 크면 오히려 memeo를 쓰는게 속도에 더 안좋은 영향을 끼칠 수 있다.
그렇기 때문에 꼭 필요한 무거운 컴포넌트에만 사용하는 것을 추천한다.

useMemo()

useMemo()라는 문법도 있는데, useEffect()와 유사하다.
하지만 useMemo()는 컴포넌트 로드 시 1회만 실행한다.

import {useMemo, useState} from 'react'

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

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

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

1. 예를 들어서 반복문을 10억번 돌려야 하는 경우
2. 그 함수르 useMemo안에 넣어두면 컴포넌트 로드 시 1회만 실행된다.

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

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

function Cart(){
  let result = useMemo(()=>{
    return 함수()
  }, [state, props])

  return (
    <div><Child /></div>
  )
}