React Hooks useMemo

Hook이란?

• Hook은 React 16.8에 새로 추가된 기능.
• Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.
• Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다.
• Hook은  클래스형 컴포넌트에서는 동작하지 않는다.
• function으로만 React를 사용할 수 있게 해주는 것이다.

 

Hook 사용 규칙

1. 리액트 함수의 최상위에서만 호출해야 한다.

반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않는다.

컴포넌트 안에는 useState나 useEffect 같은 Hook 들이 여러번 사용될 수 있는데 React는 Hook을 호출되는 순서로 저장 해놓는다.

조건문, 반복문 안에서 Hook을 호출하게 되면 호출되는 순서대로 저장을 하기 어려워진다.

 

2. 오직 리액트 함수 내에서만 사용되어야 한다.

리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 자바스크립트 함수 안에서 호출해서는 안 된다.

---

useMemo

• useMemo는 특정 값을 재사용하고자 할 때 사용하는 Hook이다.

useMemo를 호출하여 calculate를 감싸주면 이전에 구축된 렌더링와 새로 구축되는 렌더링을 비교해 value값이 동일한 경우에는 이전 렌더링의 value 값을 그대로 재활용 할 수 있게 된다.

메모이제이션 개념과 관계가있다.

function Calculator({value}){

	const result = calculate(value);

	return <>
      <div>
					{result}
      </div>
  </>;
}

/* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import { useMemo } from "react";

function Calculator({value}){

	const result = useMemo(() => calculate(value), [value]);

	return <>
      <div>
					{result}
      </div>
  </>;
}

Memoization

메모이제이션(Memoization)은 알고리즘에서 자주 나오는 개념이다.

기존에 수행한 연산의 결과값을 메모리에 저장을 해두고 동일한 이력이 들어오면 재활용하는 프로그래밍 기법이다.

메모이제이션을 적절히 사용하면 굳이 중복 연산을 할 필요가 없기 때문에 앱의 성능을 최적화할 수 있다.

useMemo는 이 개념을 이용하여 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화 시킨다.

메모이제이션 개념을 이용하여 로직을 구현할 수도 있으나 useMemo Hook을 호출하면 로직을

직접 구현하는 것을 대신해주기 때문에 훨씬 간편하다.