메모이제이션

메모이제이션이란 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산을 제한하여 프로그램의 실행 속도를 빠르게 하는 기술을 뜻한다고 하는데
리액트에서는 이러한 반복되는 값을 어떤 방식을 통해 메모리에 저장하게 되는지 알아보죠

useMemo

메모이제이션된 '결과 값'을 캐싱하는 훅으로

const getTotalPrice = useMemo(
    () =>
      payments.reduce(
        (prev, curr) => prev + Math.abs(curr.amount.value),
        0,
      ),
    [payments],
  );

두 번째 인자(dependencies)의 값이 변경되지 않는다면 첫 번째 인자로 들어간 로직을 다시 계산하지 않는다고 합니다

useCallback

메모이제이션된 '함수'을 캐싱하는 훅으로

const handleOnSubmit = useCallback(() => {
    if (isLoaded) {
      submit();
    }
  }, [isLoaded]);

함수를 캐싱한다? 리액트에서 리렌더링 발생되는 조건이 있죠

1. 1. 자신의 state가 변경될 때
2. 2. 부모로 부터 받은 props가 변경될 때
3. 3. 부모 컴포넌트가 리렌더링될 때
4. 4. forceUpdate 함수가 실행될 때

function Magazine({ listType }) {
  const onClickCard = (item) => {
    alert(item.name);
  }

  return <List onClickCard={onClickCard} listType={listType} />
}

위와 같은 상황에서 자식인 List 컴포넌트는 부모인 Magazine 컴포넌트가 리렌더링 될 때 마다 onClickCard를 새로 만들어 주어야 합니다.
부모로 부터 listType 이라는 props를 받고 있기 때문이죠

const onClickCard = useCallback((item) => {
    alert(item.name);
  }, [listType])

하지만 useCallback을 사용하면 onClickCard이 listType이 변경이 없을 시에 다시 생성되는 일은 없습니다.
listType이 변경되지 않는 한 List 컴포넌트는 캐싱된 기존의 함수를 사용하기 때문이죠