useMemo

useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 메모리에 넣기 라는 의미이며
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써
동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다.

memoization 이란
기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면
재활용하는 프로그래밍 기법을 말합니다.

useMemo 를 사용하지 않을 때

함수형 컴포넌트 랜더링 ➡️ Component 함수 호출 ➡️ 모든 내부 변수 초기화

useMemo 를 사용할 때

useMemo 를 사용하면 함수형 컴포넌트 렌더링 ➡️ Component 함수 호출 ➡️ Memorize 된 함수 재사용

설명

useMemo 는 첫번째 인자로 콜백 함수를, 두번째 인자로 의존성 배열을 넣습니다.

import { useMemo } from 'react';
const add = useMemo(callback, [])

두번째 인자인 배열의 요소 값이 업데이트 될 때만 콜백 함수를 다시 호출시켜 memoization 된 값을 업데이트
해주고 다시 memoization 을 해줍니다.
만약 빈 배열을 넘겨주면 맨 처음 컴포넌트가 렌더링 될 때만 memoization 해주고 항상 그 값을 재사용 합니다.

주의점

값을 재활용 하기 위해서 메모리에 따로 저장해 두기 때문에 불필요한 값을 메모리에 저장한다면 성능이
안좋아 질 수 있기 때문에 꼭 필요한 경우만 사용하는 것을 추천합니다.

사용 하는 경우

const user = {name: 'chan', age: 26}

useEffect = (() => {
	console.log('useEffect 호출')
},[user])

location 의 경우 객체이기 때문에 리렌더링시 참조값이 변경되기 때문에 useEffect 함수가 실행됩니다.
따라서 useMemo 로 묶어주면 useEffect 함수가 실행되지 않습니다.

또 다른 예시
함수를 사용하는 경우

function calculate() {
    return 10;
}

function Component() {
    const value = calculate();
    return <div>{value}</div> 
}

만약 calculate 함수가 정말 복잡한 함수였다면 useMemo 를 쓰는게 더 좋을 수도 있습니다.
여기서 궁금증이 들 수도 있습니다. 함수인데 왜 useCallback 을 쓰지 않고 useMemo 를 쓰는 걸까?
이유는 useCallback 은 함수 자체를 재사용 하는 반면에 useMemo 는 계산한 값을 재사용 하기 때문입니다.
따라서 함수 안에서 return 문이 있다면 useMemo 를 쓰는 것이 맞습니다.

결론

만약 useEffect 의 두번째 인자로 객체나 함수가 들어갈 경우
또는 정말 복잡한 계산 값이 있을 경우 쓰는 것이 좋습니다. 그외에는 메모리만 잡아먹으니 쓰지 않도록 합시다!!