📌 학습 날짜: 2022-3-29
📌 인프런 강의 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지를 수강하면서 정리한 글입니다.

🎯목표

• Memoization(메모이제이션)을 통한 연산 최적화 기법을 알아본다.

• 연산 결과값을 재사용하는 방법을 알아본다.

메모이제이션이란?

컴퓨터 프로그래밍에서의 메모이제이션

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 (출처: 위키백과)

• 리액트 뿐만 아니라 컴퓨터 프로그래밍 전반적으로 쓰이는 개념이라는 것을 알 수 있다.

리액트에서의 메모이제이션

• 리액트에서도 이전에 연산한 값을 재사용하기 위해 사용한다.

• 컴포넌트의 props 가 바뀌지 않을 때 리렌더링되는 것을 방지 → 성능 최적화

• 불필요한 리렌더링을 방지해 컴포넌트의 성능을 성능을 최적화한다.

useMemo

• 리액트에서 불필요한 연산으로 인한 리렌더링을 방지하기 위해 사용하는 Hook

useMemo 사용 시 주의사항

• useMemo를 사용하면 메모이제이션된 값, 즉 이전의 연산 결과값을 받는다.

• useMemo를 사용한 값은 함수가 아니라 콜백 함수가 반환하는 값이다.

• 따라서 전역에서 해당 값을 사용할 때는 함수 호출이 아니라 값의 이름으로 사용한다.

const emotionAnalysis = useMemo(() => {
    console.log("일기 분석 시작");

    const goodEmotion = data.filter((item) => item.emotion >= 3).length;
    const badEmotion = data.length - goodEmotion;
    const goodRatio = (goodEmotion / data.length) * 100;

    return { goodEmotion, badEmotion, goodRatio };
  }, [data.length]);

const { goodEmotion, badEmotion, goodRatio } = emotionAnalysis(); //(X)
const { goodEmotion, badEmotion, goodRatio } = emotionAnalysis; //(O)

✨복습퀴즈

• 메모이제이션(memoization)이란?
• 리액트에서 메모이제이션 기법을 사용했을 때의 장점은?
• useMemo를 사용할 때 주의해야하는 것은?(반환하는 값과 관련됨)

📚참고 자료

Hooks API Reference - React

리액트와 메모이제이션

Destructuring Assignment in JavaScript - GeeksforGeeks