useMemo는 메모이제이션 된 값을 반환하는 Hook이다. Memo는 “memoized”를 의미하며 간단하게 설명하면 이전에 계산한 값을 재사용 한다는 의미정도이고 자세한 내용은 여기에서 확인해주세요^^

랜더링마다 호출되는 컴포넌트 함수

일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성된다.

const Component = ({a, b}) => {
	const value = 개쩌는_함수(a, b)
  return <OtherComponent>{value}</OtherComponent>
}

컴포넌트 함수는 렌더링이 일어날 때마다 호출이 된다. 함수가 호출 되면 내부 로직들이 돌아가고, 이를 기반으로 JSX문법으로 마크업 된 UI가 리턴된다.

컴포넌트의 렌더링은 앱을 실행했을때 뿐만이 아니라 자기 자신이나 부모 컴포넌트의 상태 변경이 일어날 때도 렌더링 되기도 한다.

만약에 내가 만든 함수가 너무 대단한 나머지 컴퓨터도 연산하기 힘들어하면 컴포넌트의 재 랜더링이 될 때마다 함수가 호출이 되므로 리액트 앱의 성능이 떨어질 것이다.

함수형 컴포넌트에 memoization 적용

랜더링이 일어날 때 마다, 함수의 인자 값들이 항상 바뀌는 게 아니라면 굳이 없을 것이다. 위와 같은 문제는 useMemo Hook을 사용하면 개선할 수 있다.

useMemo Hook의 기본 구조는 아래와 같고 인자들로는 “생성(create)” 함수와 그것의 의존성 값의 배열 2개의 인자를 받는다.

const memoizedValue = useMemo(() => 개쩌는_함수(a, b), [a, b]);

useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 할 것입니다. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해준다.