리액트 컴포넌트는 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 한다.
하지만, 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다.
이때, 사용하는 React Hook이 useMemo와 useCallback이다.
1. UseMemo
useMemo는 특정 값을 재사용하고자 할 때 사용한다.
function Calculator({value}){
const result = calculate(value);
return <>
<div>
{result}
</div>
</>;
}위 컴포넌트는 값을 받아와서 calculate라는 함수에넣은 후 result값을 출력하는 함수다.
만약 calculate가 복잡한 연산을 하는 함수면, 렌더링을 할 때 마다 함수를 호출하여 오랜 시간이 걸릴 것이다.
만약, result의 값이 변하지 않는데도 불구하고 계속 렌더링이 되면 그만큼 성능이 떨어질 것이다.
import { useMemo } from "react";
function Calculator({value}){
const result = useMemo(() => calculate(value), [value]);
return <>
<div>
{result}
</div>
</>;
}위 처럼 useMemo를 사용하면 변하지 않을 경우의 value값을 어딘가에 저장할 수 있다.
2.useCallback
useCallback은 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이며
useMemo는 값을 재사용하는 목적이지만, useCallback은 함수의 재사용을 위해 사용하는 hook이다.
function Calculator({x, y}){
const add = () => x + y;
return <>
<div>
{add()}
</div>
</>;
}위와 같은 함수도 렌더링 될 떄마다 실행되게 된다.
하지만, 의존값인 x와 y가 바뀌지 않으면 함수를 그대로 사용해도 된다.
다만, param으로 값을 받는 함수는 해당이 되지 않는다.
import React, { useCallback } from "react";
function Calculator({x, y}){
const add = useCallback(() => x + y, [x, y]);
return <>
<div>
{add()}
</div>
</>;
}useCallback은 props로 함수를 전달해줄 때 사용하기 좋다.
React는 리렌더링 시 함수를 새로이 만들어서 호출을 한다.
새로이 만들어 호출된 함수는 기존의 함수와 같은 함수가 아니다.
그러나 useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다고 볼 수 있다.
따라서 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 막을 수 있는 효과가 있다.
