React.memo와 useMemo

출처 : https://velog.io/@integer/React.memo%EC%99%80-useMemo

 

Memoization이란?

메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는데 주로 사용되는 최적화 기술이다.

https://www.inflearn.com/course/따라하는-리액트/dashboard

 

React.memo

React.memo란?

React.memo는 고차 컴포넌트(Higher Order Component)입니다.

컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.

https://ko.reactjs.org/docs/react-api.html

💡 부모 컴포넌트가 렌더링 되면 모든 자식 컴포넌트 또한 렌더링 되는데 props가 변경되지 않았다면 자식 컴포넌트는 렌더링 될 필요가 없다. 이때 React.memo 함수를 사용해 불필요한 렌더링을 방지해 준다.

• React.memo는 props 변화에만 영향을 준다.
• props가 복잡한 객체인 경우 React.memo는 얕은 비교만 한다.
• 다른 비교를 원하면 React.memo의 두번째 인자로 비교할 수 있는 함수를 넘겨주면 된다.
  
  

React.memo를 사용하는 경우

• 함수형 컴포넌트인 경우
• 컴포넌트가 같은 props로 자주 렌더링 되는 경우
• 무겁고 복잡한 연산이 있는 경우
  
  

React.memo를 사용할 필요가 없는 경우

• 클래스형 컴포넌트인 경우 PureComponent를 확장해서 사용하거나 shouldComponentUpdate()
  함수를 사용한다.
• 컴포넌트가 다른 props로 자주 렌더링 되는 경우
• 가벼운 프로젝트인 경우
  
  

React.memo 사용 방법

• react에서 React를 import 해준다.
• 컴포넌트를 React.memo로 감싸준다.
  

  

• 화살표 함수인 경우
  

  

 

useMemo

useMemo란?

// useMemo(() => fn, deps)
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 렌더링 최적화를 위한 React Hook으로 메모이즈 된 값을 return 한다.
• 인자로 함수와 dependencies을 받는다.
• 두 번째 인자로 준 dependencies 인자 중에 하나라도 변경되면 첫 번째 인자의 함수를 재실행한다.
• 만약 dependencies 인자가 변경되지 않았다면 이전 렌더링 때 저장해둔 값을 재활용한다.
• 만약 dependencies 인자로 아무것도 전달하지 않으면 렌더링 할 때마다 새로운 값을 반환한다.
  
  

React.memo와 useMemo의 공통점

• props가 변하지 않으면 리렌더링 되지 않고 이전의 메모이즈된 결과를 반환한다.
  
  

React.memo와 useMemo의 차이점

• React.memo는 고차 컴포넌트(Higher Order Component), useMemo는 React Hook이다.
• React.memo는 클래스형, 함수형 컴포넌트 모두 사용 가능하지만 useMemo는 함수형 컴포넌트에서만 사용 가능하다.
  
  

useMemo 사용 방법

• react에서 useMemo를 import 해준다.
• 함수를 useMemo로 감싸준다.

function Component({ a, b }) {
	const result = useMemo(() => compute(a, b), [a, b]);
	
	return <div>{result}</div>
}