🖐useMemo란?

memoization 이란 기존에 수행한 값을 저장해두었다가 같은 값이 사용될 경우 재사용하여 중복 연산을 막는 것을 뜻한다.
react에서 불필요한 재랜더링이 일어날때 연산이 무한 반복되어 느려지는데, useMemo를 사용하면 이를 막을 수 있다.

//useMemo(콜백함수, 조건)
const ❤ = useMemo(() => {} ,[]) 

🔽 useMemo에서 조건이 달라질 경우에만 콜백함수를 실행한다. 따라서 compute에서는 [조건]안에 들어있는 x,y 값이 달라질 경우에만 plus(x,y)를 실행한다.

function plus(x,y){
	return x+y
}
function compute({ x, y }) {
  const z = useMemo(() => plus(x, y), [x, y]);
  return <div>{z}</div>;
}

✔useMemo 예시

function User(){
  return (
    <Parent 이름="Kim" 나이="20"/>
  )
}

function Profile(props){
  return (
    <div>
      <Name 이름={props.이름} />
      <Age 나이={props.나이} />
    </div>
  )
}

function Name(props){
  useEffect( ()=>{ console.log('이름렌더링') } );
  return <div>{props.이름}</div>
}
function Age(props){
  useEffect( ()=>{ console.log('나이렌더링') } );
  return <div>{props.나이}</div>
}

만약 User의 이름을 바꾸게되면 Child1만 렌더링 되는 것이 아니라 Child1, Child2 모두 렌더링이 된다.

이름과 상관없는 Child2 까지 불필요하게 렌더링이 되는 문제가 발생한다.

따라서 useMemo를 사용하여 나이는 바뀌지 않았을 때, Child2 랜더링을 막을 수 있다.

function User(){
  return (
    <Parent 이름="Kim" 나이="20"/>
  )
}

function Profile(props){
  return (
    <div>
      <Name 이름={props.이름} />
      <Age 나이={props.나이} />
    </div>
  )
}

function Name(props){
  useEffect( ()=>{ console.log('이름렌더링') } );
  return <div>{props.이름}</div>
}

👉 #useMemo 사용 
let Age= memo(function(props){
  useEffect( ()=>{ console.log('나이렌더링') } );
  return <div>{props.나이}</div>
}

하지만 useMemo는 재사용을 위해 값을 저장해두기 때문에 무분별하게 쓰게 되면 많은 메모리를 사용해 성능이 저하될 수 있다.

➕ 코딩애플 강의와 useMemo 참고글을 정리한 글입니다.