memo

그냥 참고로 알아두자

A라는 컴포넌트와 B라는 컴포넌트가 있을 때, B가 A의 자식이라 생각해보자
A라는 컴포넌트가 재렌더링이 되면 자식 컴포넌트인 B도 자동으로 함께 재렌더링이 된다.
근데 만약에 B라는 컴포넌트가 무거운 컴포넌트라면?
A 컴포넌트가 재렌더링이 될 때 당연히 느린 현상을 맛보게 될 거다.
그럴 때 memo를 사용하자

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

function Parent(){ 

  let [count, setCount] = useState(0)

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

Parent 컴포넌트 안에 Child 컴포넌트를 만들고 버튼을 누를 때 마다 Parent 컴포넌트가 재렌더링되게 만들었는데 이 경우 Child 컴포넌트도 재렌더링이 될 것이다.

여기서 Child 컴포넌트가 무거운 컴포넌트라 생각하고 memo를 사용해보자

import {memo, useState} from 'react'

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

function Parent(){ 

  let [count, setCount] = useState(0)

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

1. memo를 임포터해서
2. 원하는 컴포넌트 정의부분을 감싸면 된다.

이렇게 쓰면 부모컴포넌트가 최초 렌더링이 될 때만 자식이 렌더링 되고, 그 뒤로는 재렌더링이 안될것이다.

memo로 감싸진 컴포넌트는 프롭스가 변경될 때만 해당 컴포넌트가 재렌더링이 된다.
그런데 해당 프롭스가 무거우면 memo를 안 쓰는것이 좋다.

useMemo

useEffect와 비슷한 용도의 useMemo라는 문법도 있는데, 컴포넌트 로드시 1회만 내가 원하는 코드를 실행할 수 있다.

import {useMemo, useState} from 'react'

function 원하는코드(){
  return 반복문10억번돌린결과
}

function Parent(){ 

  let result = useMemo(()=>{ return 원하는코드() }, [])

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

1. 예를 들어 반복문이 10억번 돌려야하는 경우 useMemo안에 넣어두면 컴포넌트 로드시 1회만 실행이 된다.
   그래서 재렌더링마다 동작을 안하니 좀 효율적일 수 있다.
   useEffect처럼 dependency([])를 넣을 수 있다.
   그리고 특정 state, props가 변할 때만 실행할 수 있다.

useEffect와 useMemo의 차이점은 useEffect는 html 보여주는 코드들이 실행이 다 끝나면 useEffect가 실행이 되고, useMemo는 렌더링이 될 때 같이 실행해준다.