React - memo

배경
부모와 자식 컴포넌트가 존재 한다고 가정하자.
부모의 상태가 변경되면 자식 컴포넌트는 리렌더링이 된다.
부모 컴포넌트가 리렌더링이 되어도 만약 자식 컴포넌트가 받는 prop이 동일하다면 비효율적으로 리렌더링이 되고 있는 것이다.
이 상황에 memo를 사용하면 효과를 볼 수 있다.

개념
prop이 변경 될때마다 렌더링하게끔 도와준다.
메모리 어딘가에 컴포넌트를 저장한다.
HOC (High Order Component)

이유
불필요한 렌더링을 최소화 할 수 없을까?
useCallback과 useMemo와 함께 불필요한 렌더링을 최소화 해보자

주의
꼭 필요할 때
memo를 추가하면 메모리 어딘가에 저장되기 때문에 꼭 필요할 때 사용해야한다.
React는 memo를 안해주어도 충분히 빠르다.

prop check
prop이 primitive는 check가 예상대로 잘 되지만, 객체라면 객체 안에 값이 같더라도 prop이 다르다고 판단해서 리렌더링이 발생할 것이다.
이유는 리렌더링 되면서 객체가 재생성되면서 저장된 주소 값이 다르게 저장되기에 주의해야함
이 경우 useMemo를 이용해서 객체를 캐싱해보자

언제 사용하나
아래 두가지 요건을 충족시킬 때
 - 컴포넌트가 같은 Props로 자주 렌더링 될 때
 - 컴포넌트가 렌더링이 될 때 마다 복잡한 로직을 처리

 

참고
https://youtu.be/oqUgcxwrnSY