045. React - useMemo와 연산 최적화

메모이제이션이란?

직역하자면 '기억해두기', '메모해두기'라는 의미.

최초에 한 번 연산한 후 결과값을 메모해두고, 같은 계산이 반복되면 다시 계산하는 것이 아니라 결과값을 바로 꺼내어 전달해주는 것.

useMemo 사용 방법

// import 하기

import { useMemo } from 'react';

// 기본형 작성
useMemo(() => {/* 여기에 연산 내용 작성 */}, []);

// 의존성 배열이 비어 있으면, 마운트 시 한 번만 연산하고, 그 이후에는 컴포넌트가 리렌더링 되더라고 그 연산의 결과를 계속 재사용함.
// 따라서 값이 컴포넌트 라이프사이클 동안 바뀔 일이 없을 때는
// 의존성 배열을 비워두면 되고,  의존성 배열에 무언가를 넣으면 그 무언가가 변화할 때 다시 연산한다.
// 즉 컴포넌트 리렌더링과 상관없이 값이 바뀔 때만 다시 연산해주는 방법임.

function 매우비싼연산(숫자) {
    return 숫자 * 2;
}

const 값비싼연산 = useMemo( () => { 매우비싼연산(숫자) }, [숫자] );