React, 재렌더링 막는 memo, useMemo

박지윤·2024년 6월 28일

🔎 React.memo

리액트는 부모 컴포넌트가 렌더링 되면 모든 자식 컴포넌트 또한 랜더링 된다.
그런데 이때 자식 컴포넌트가 랜더링이 1초나 걸리는 무거운 컴포넌트라면?? ;

부모컴포넌트가 작동될때마다 1초씩 버벅이는 불상사가 발생한다.
이럴때 바로 그 자식컴포넌트를 memo로 감싸놓으면 이 자식컴포넌트가 필요한 상황에서만 재랜더링이 될수있도록 할수있다.

✔ React.memo란 무엇인가 ?

React.memo()는 React의 함수 컴포넌트 최적화를 돕는 고차원 함수(Higher-Order Component)이다. 이를 사용하면, 컴포넌트가 동일한 props로 렌더링 될 때 리렌더링을 방지할 수 있다. 즉, 불필요한 렌더링을 줄여 성능 향상에 도움이 될 수 있다.

✔ React,memo 예시

function Child(){
  return <div>자식컴포넌트</div>
}

function Cart(){ 
  let [count, setCount] = useState(0)
  
  return (
    <Child />
    <button onClick={()=>{ setCount(count+1) }}> + </button>
  )
}

Cart 컴포넌트 안에 Child 컴포넌트를 만들었다.
그리고 버튼을 누를때마다 Cart 컴포넌트가 재랜더링이 되는 구조이다.
이 경우 Child도 재랜더링 되어진다.
평소 별문제 없겠지만 이 Child가 재랜더링 되어지는데 2초나 걸리는 컴포넌트라면 ?
버튼을 누를때마다 버벅되어질것이다. 그리고 이럴때 memo라는 함수를 사용한다.

import {memo, useState} from 'react'

let Child = memo( function(){
  return <div>자식컴포넌트</div>
})

function Cart(){ 

  let [count, setCount] = useState(0)

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

memo 함수를 사용함으로서 "꼭 필요할때만 Child 컴포넌트 재랜더링 해주세요 " 라고 요청하는것이다

✔ React,memo 사용 시 주의사항

memo는 특정 상황, props가 변경될때만 재랜더링이 되어진다.
그렇기에 memo 를 감싸놓은 컴포넌트는 실행되기전에 항상 비교작업을 한다.

> 기존props == 신규props

그 이후 재랜더링의 여부를 결정하는데 이때 이 전송되는 props가 길고 복잡하다면 비교작업에서부터 오래걸릴수 있기에 memo를 온갖곳에 붙여서는 안된다는점 잊지말자.

React.memo를 사용하는 경우로는

함수형 컴포넌트인 경우
컴포넌트가 같은 props로 자주 렌더링 되는 경우
무겁고 복잡한 연산이 있는 경우이다.

🔎 useMemo

memo와 유사한 문법으로 useMemo가 있다.
useEffect와 비슷한 용도인데 (차이는 아래에서)useMemo는 컴포넌트 로드 시 1회만 실행하고 싶은 코드가 있을때 거기에 담으면 된다.

✔ useMemo 사용방법

react에서 useMemo를 import 해준다.
함수를 useMemo로 감싸준다.

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

 // 렌더링 최적화를 위한 React Hook으로 메모이즈 된 값을 return 한다.
 // 인자로 함수와 dependencies을 받는다.
 // 두 번째 인자로 준 dependencies 인자 중에 하나라도 변경되면 첫 번째 인자의 함수를 재실행한다.
 // 만약 dependencies 인자가 변경되지 않았다면 이전 렌더링 때 저장해둔 값을 재활용한다.
 // 만약 dependencies 인자로 아무것도 전달하지 않으면 렌더링 할 때마다 새로운 값을 반환한다.

✔ useMemo 예시

import {useMemo, useState} from 'react'

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

function Cart(){ 

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

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

예를 들어 반복문을 10억번 돌려야하는 경우 ,
그 함수를 useMemo 안에 넣어두면 컴포넌트 로드시 1회만 실행됨으로 재랜더링마다 동작되지 않기때문에 효율적으로 동작할수있다
useEffect 처럼 dependency도 넣을 수 있어서 특정 state, props가 변할 때만 실행할 수도 있다.