[Hook] useMemo, useCallback

함수 혹은 변수를 메모리에 상주 시키고 싶을때 사용하는 훅 으로, 시간이 오래 걸리는 항목을 메모리에 올려 속도 향상 이유로 쓰기도 한다.

(빈번하게 호출되거나 할 경우) 혹은 const 처럼 한번만 계산되나, 결과값을 계속하여 사용할 경우 사용되기도 한다. 

둘다 같은 소스코드 내에서 활용하기 위해 주로 사용된다. 

 

• 인자값
  • 1번째 인자값은 콜백함수
  • 2번째 인자값은 useState 와 마찬가지로 배열을 받음. 
    • 빈배열 : 처음 1번만 호출되어 콜백함수를 호출하고 그 후론 계산된 값을 메모리에서 가져와 사용
    • 배열에 변수가 있을경우 : 해당 변수값이 변경될 때 마다 콜백함수 호출
• useMemo
  • 값 만 메모리에 담아둔다. 1번째 인자값으로 함수를 두더라도, 함수 결과값을 메모리에 담아 둔다

import { useMemo } from "react";

....
function Test()
{
	...
    const val1 = useMemo(() => {
    	...
        return 10;
    },[]);
}

 

 

• useCallback
  • 함수를 메모리에 담아두기 위해 사용된다. 값이 아닌 함수 자체를 메모리에 두는것이 useMemo와 다른점이다. 

import { useCallback } from "react";

....
function Test()
{
	...
    const val1 = useCallback(() => {
    	...
        return 10;
    },[]);
}