React - React.memo

1. 개요

이전 글에서 useMemo에 대해 배워봤다. useMemo는  hook이기 때문에 오직 함수형 컴포넌트 안에서만 

사용이 가능하다. 하지만 React.memo는 HOC(Higher-order Components)이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용이 가능하다. 

 

2. 사용 방법

const MyComponent = React.memo((props) => {
	return (/*컴포넌트 렌더링 코드*/)}
);

1. 기존의 함수를 React.memo로 감싸준다.

 

만약 컴포넌트가 같은 props를 받을 때 같은 결과를 렌더링한다면 React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지할 수 있다.

즉, 컴포넌트에 같은 props가 들어온다면 리액트는 컴포넌트 렌더링 과정을 스킵하고 마지막에 렌더링된 결과를 재사용한다.

 

React.memo는 오직 props가 변경됐는지 아닌지만 체크한다. 만약 React.memo에 감싸진 함수형 컴포넌트가 함수 내부에서 useState나 useContext같은 훅을 사용하고 있다면, state나 context가 변경될 때마다 리렌더링된다.