재렌더링을 막아보기

재렌더링 막기위해선 memo

컴포넌트가 재렌더링되면 그 안에 있는 자식컴포넌트는
항상 함께 재렌더링이 된다.
하지만 자식컴포넌트의 렌더링 시간이 1초나 걸리는 컴포넌트라면? 불상사가 발생할 수 있다.
그럴 때 쓰는 것이 memo이다.

function Child(){
  console.log('재렌더링됨')
  return <div>자식임</div>
}

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

이런식으로 Cart안에 Child 컴포넌트를 하나 만들었다.
그리고 버튼을 누를때 Cart이외에 Child 컴포넌트도 재렌더링 되게 만들었다.
하지만 Child컴포넌트가 엄청 느린 컴포넌트일때?
바로
"꼭 필요할 때만 <Child>컴포넌트 재렌더링해주세요"
이렇게 코드를 짜는 것이다.

memo()로 컴포넌트 제렌더링 막기

memo()를 쓰기 위해선 react라이브러리에서 import해야한다.

import {memo,useState} from 'react'

let Child = memo(function(){
  console.log('재렌더링됨')
  return <div>자식임</div>
)}
                 
function Cart(){
  let[count,setCount] = useState(0)
  
  return(
    <Child/>
    <button onClick={()=>{setCount(count+1)}}>
      +</button>
    )
}

이렇게 원하는 컴포넌트 정의부분을 감싸면 된다.

useMemo

useEffect와 비슷한 용도로 사용한다.
컴포넌트 로드시 1회만 실행하고 싶은 코드가 있을시 쓴다.

import {useMemo,useState} from 'react'

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

function Cart(){
  let result = useMemo(()=>{return 함수()},[])
  
  return(
    <Child/>
    <button onClick={()=>{setCount(count+1)}}>
      +</button>
    )
}

이렇게 사용을 한다.

※주의사항
memo로 감싼 컴포넌트는 헛된 재렌더링을 막기위해서
기존 props와 바뀐 props를 비교하는 연산이 추가로 진행된다.
고로 props가 크고 복잡하면 그 자체로도 부담이 될 수 있다.
그러기 꼭 필요한 곳에만 사용하는 것이 좋다.