React : memo로 재렌더링 막기 (memo, useMemo)

memo

부모컴포넌트가 재렌더링되면 자식컴포넌트도 항상 함께 재렌더링된다. 이 때 자식컴포넌트가 무겁다면 특정 버튼을 클릭할 때마다 모두 재렌더링 되어 로딩시간이 걸리는 등 문제가 생길 것이므로, memo로 자식컴포넌트가 특정 상황에서만 재렌더링되도록 작성해주면 좋다.

---

쓰기 전 주의사항

memo로 감싼 자식컴포넌트는 기존 props와 현재 props를 검사해 props가 변할 때만 재렌더링한다.
그러므로 props가 매우 길고 복잡하다면 오히려 memo를 쓰는 것이 손해일 수 있다.

---

전

function 컴포넌트(){}는 물론 당연히 이렇게도 표현이 가능하다.

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

후

memo를 import 해온 후 memo()로 function(){}을 감싸면 된다.

import { memo, useState } from "react"

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

---

useMemo

아래처럼 엄청 무거운 함수가 포함되어있다면 Cart가 재렌더링될 때마다 해당 함수가 돌아가 로딩이 걸릴 것이다.
useMemo로 감싸면 해당 함수는 Cart가 처음 렌더링될 때만 실행되고 다시 실행되지 않는다.

---

useEffect와 다른 점

useEffect는 HTML을 보여준 후 실행이 되고, useMemo는 같이 실행된다.

---

전

function Heavy(){
  return `엄청 오래 걸리는 함수...`
}

function Cart(){
  let result = Heavy();
  ...

후

function Heavy(){
  return `엄청 오래 걸리는 함수...`
}

function Cart(){
  let result = useMemo(() => { return Heavy() });
  ...

---

출처 : 코딩애플 https://codingapple.com/