[React Hook] useMemo, useCallback

리액트는 상태가 변경되거나, 부모 컴포넌트가 렌더링 될 때마다 다시 렌더링이 되는 구조로 되어있다. 당연하지만 잦은 리렌더링은 앱에도 좋지 않은 성능을 끼치고 유저 경험에도 별로 좋지 않다.
때문에 리액트에는 렌더링 최적화를 위한 Hook이 존재하는데, useCallback과 useMemo가 바로 그것이다.

---

useMemo

특정 값을 재사용하고자 할 때 사용한다.

function Calculator({value}){

	const result = test(value) 
    	

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

이 컴포넌트는 props로 받아온 value를 test에 인자로 넘기고 그 결과를 출력하고 있다. 그러나 test함수가 위처럼 간단하지 않고 복잡할 경우, 해당 컴포넌트는 렌더링 할 때마다 함수를 계속해서 호출하고, 그 때마다 연산에 시간이 소비될 것이다. 때문에 유저들은 앱의 로딩 속도가 느리다고 생각할 것이다.

import { useMemo } from "react";

function Calculator({value}){

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

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

만약 렌더링을 할 때마다 value의 값이 바뀌지 않는다면(바뀌면 아쉽게도 어쩔 수 없고...), value의 값은 그냥 어딘가에 저장해 두었다가 필요할 때만 찾아서 쓰는 것이 더 좋을 것이다. 무엇보다 이 방식은 연산에 필요한 시간을 없앨 수 있다. 이럴 때 사용되는 Hook이 useMemo이다.
useMemo를 호출하여 test를 감싸주면, 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value값이 동일할 경우에는 이전 렌더링의 value값을 그대로 재활용할 수 있게된다.

메모이제이션

메모이제이션은

기존에 수행한 연산의 결과를 메모리에 저장하고, 동일한 입력이 들어왔을 때 해당 결과를 재활용하는 기법이다. 연산이 두번 필요없기 때문에 성능을 최적화 할 수 있다.(입력값만 확인하면 되니까)

useCallback

함수의 재사용을 위해 사용한다.

function PlusOne({x}){

	const add = () => x + 1;

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

해당 컴포넌트가 리렌더링 되어도 x의 값이 변하지 않는다면, 함수 또한 메모리 어딘가에 저장해 두었다 다시 꺼내 쓸 수 있을 것이다.

import React, { useCallback } from "react";

function Calculator({x, y}){

	const add = useCallback(() => x + 1, [x]);

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

단 useCallback의 경우, 단순히 함수를 꺼내서 호출하는 방식이기 때문에, 경우에 따라 큰 의미가 없는 경우가 있다.
자식 컴포넌트의 props로 함수를 전달할 때 이를 사용하는 것이 좋다.