useMemo/useCallback

useMemo는 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능 하다

useMemo

특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다

이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. (특정 value를 재사용)

/* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
/*value 를 인자로 받는 Calculator 컴포넌트*/
import { useMemo } from "react";

function Calculator({value}){

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

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

value 는 일종의 값으로서, 이 값이 계속 바뀌는 경우라면 어쩔 수 없겠지만, 렌더링을 할 때마다 이 value값이 계속 바뀌는 게 아니라면 이 값을 어딘가에 저장을 해뒀다가 다시 꺼내서 쓸 수만 있다면 굳이 calculate 함수를 호출할 필요도 없으므로 useMemo Hook을 사용할 수 있다

useMemo를 호출하여 calculate를 감싸주면, 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value값이 동일할 경우에는 이전 렌더링의 value값을 그대로 재활용할 수 있게 되고 이는 메모이제이션(Memoization) 개념과 긴밀한 관계가 있다.

=> 메모이제이션(Memoization) 이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다  중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다

useCallback

useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook 이다

 언제나 동일한 함수를 return해준다

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

function Calculator({x, y}){

	const add = useCallback(() => a+ b, [a, b]);

	return <>
      <div>
					{add()}
      </div>
  </>;
}

useCallback만 사용해서는 useMemo에 비해 괄목할 만한 최적화를 느낄 수는 없다 왜냐하면 useCallback은 함수를 호출을 하지 않는 Hook이 아니라, 그저 메모리 어딘가에 함수를 꺼내서 호출하는 Hook이기 때문이다 단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기 위해서 useCallback을 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도있다   자식 컴포넌트의 props로 함수를 전달해줄 때 이 useCallback을 사용하기가 좋다

 

 

useMemo는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고,
useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이다