1-11) [리액트 기초] React.memo를 이용한 최적화

 

React.memo는 인수로 전달한 컴포넌트를 메모리제이션된 컴포넌트로 만들어 반환하는 역할을 한다.

이때 메모리제이션 되는 기준은 Props의 값의 변화가 있는지 없는지 여부가 기준이 된다.

 

React.memo 역시 useMemo와 역할은 비슷하지만 

useMemo는 리액트훅에 해당되고 

 

React.memo는 고차 컴포넌트에 해당한다.

 

 

 

즉 전달된 Props 가 변경되지 않는한 리렌더 되지 않는다.

 

사용법은 간단하다.

import React from 'react';



... 소스코드


export default React.memo(TodoItem);

 

위 처럼 export 할 때 React.memo() 로 컴포넌트를 감싸주면 된다.

그럼 메모리제이션된 고차 컴포넌트로 리턴 된다.