성능개선 2 : 재렌더링 막는 memo, useMemo

memo

자식컴포넌트의 재렌더링을 막아줌
정확히는, 자식컴포넌트가 받는 props에 변화가 있을때만 재렌더링되도록 함.

let Child = memo( function(){
  console.log('재렌더링 체크용')
  return <div>자식컴포넌트</div>
})

어떻게요?

부모컴포넌트에서 props로 보낸 원본 변수와 자식컴포넌트에서 받은 props값을 서로 비교. 그 둘에 차이가 발생하면 재렌더링시키는 방식.
그래서 props가 너무 복잡하다면 memo 사용을 고려해봐야함.

useMemo

useEffect와 비슷한 역할을 하는 react hook.
useEffect와 마찬가지로 '[]'디펜던시 걸어서 특정 state변경때만 동작하도록 할 수도 있음.

let result = useMemo(()=>{ return 어디서많이본듯한모습() }, [])

그럼 뭐가다른거에요?

다른점이 있다면, html이 다 렌더링된 후에 동작하는 useEffect와 달리 그냥 렌더링시점에 동작함.