미라클 메모리

목차

메모이제이션 - 메모를 해둔다.

이미 계산한 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법, 다시만난 계산을 위해서 또다른 계산을 할 필요가 없다는 것이다.

const getDiaryAnalysis = () => {
    console.log("일기 분석 카운팅");

    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
    return { goodCount, badCount, goodRatio };
  };

  const { goodCount, badCount, goodRatio } = getDiaryAnalysis();

앞서 API 작업을 했던 컴포넌트에서 useMemo를 사용하는 상황이다. 이때 getDiaryAnalysis 함수를 호출하면 한번만 호출이 될 것 같은데 2번이 호출이 된다 왜일까?

첫 번째 호출

App 컴포넌트가 호출됨에 따라서 getDiaryAnalysis 가 실행됨에 따라 첫번째로 호출한다

두 번째 호출

useEffect(() => {
    getData();
  }, []);

useEffect를 통해 컴포넌트가 마운트 될 때 getData 를 호출시킨다. 호출 된 데이터는 state의 값을 변경시킨다. 컴포넌트에서 state값이 변경된다는 것은 컴포넌트가 다시 렌더링 된다는 것을 뜻한다. 그로인해서 한번 더 getDiaryAnalysis 가 호출이 된다. 이는 비효율적이다

UseMemo를 사용하여 불필요한 연산 줄이기

const getDiaryAnalysis = useMemo(() => {
    console.log("일기 분석 카운팅");

    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
    return { goodCount, badCount, goodRatio };
  }, [data.length]);

이때 사용하는 것이 바로 useMemo다. useMemo와 함께 두번째 의존성 배열을 잘 활용하면 불필요한 연산을 줄일 수 있다. useMemo로 감싸준 값의 return 배열은 getDiaryAnalysis에 저장이 된다.

const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

그렇기에 getDiaryAnalysis 함수의 return 값을 뽑아서 사용하기 위해서는 위와같이 작성하면 된다. 의존성 배열로 인하여 data.length의 길이값이 변하지 않는 이상 getDiaryAnalysis는 호출되지 않는다. 이로 인하여 필요한 상황에만 렌더링 될 수 있게 도와준다.