React.memo
Component가 React.memo()로 래핑될 때, React는 Component를 렌더링하고 결과를 Memoizing*한다. 그리고 다음 렌더링이 일어날 때 props가 같다면 React는 Memoizing된 내용을 재사용한다.
* Memoizing
: 비용이 많이 드는 함수 호출의 결과를 저장하고 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술
| 사용 권장 | 사용 지양 |
| 함수 기반의 Component Component가 같은 props로 자주 렌더링되는 경우 무겁고 복잡한 연산이 있는 경우 |
성능적인 이점을 얻지 못할 경우 Component가 다른 props로 자주 렌더링되는 경우 클래스 기반의 Component |
// 기본
export default Sample;
// React.memo 적용
export default React.memo(Sample);
참고