불필요한 재 렌더링을 막으려면 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>
    )
}