useMemo()

메모이제이션이란? 💭

• 메모이제이션(memoization)이란 값비싼 함수 호출 결과를 캐싱한 후, 동일한 호출이 발생할때 다시 계산하는 대신, 캐싱된 결과를 반환하는 프로그래밍 기술이다. 여러번 호출되는 함수 또는 컴포넌트가 있을 때 유용하다.
• 메모이제이션은 메모리에 특정한 값을 저장하는 것이기 때문에 남용하면 오히려 성능을 저하시킬 수 있다.
• 현업에선 필수지만, 프로젝트 진행 시 성능은 마지막에 고려하는 것으로, 기능을 동작하게 한 후, 고도화 튜닝하고 싶을때 적용할 것을 권장한다.
• 메모이제이션은 순수 함수 호출을 최적화하고, 중복 계산을 줄이며 성능을 향상시키는 방법을 제공함으로써 함수형 프로그래밍 패러다임을 보완하는 강력한 기술.
• React에서는 useMemo와 useCallback와 같은 메모이제이션 훅을 통해 성능을 향상시키고 코드의 복잡성을 줄일 수 있다.

[참고자료] https://d2.naver.com/helloworld/9223303

 

React에서의 메모이제이션 사용

• React에서는 memo, useMemo, useCallback 등을 통해 메모이제이션을 사용할 수 있다.
• 리액트에서 메모이제이션은 렌더링 성능을 향상시키는데 효과적인 기법이다. 동일한 props를 받았을 때 컴포넌트 렌더링을 생략하고 이전 결과를 재사용하여 불필요한 리렌더링을 방지한다.

기본 함수형 컴포넌트

렌더링 → Component 함수 호출 → 모든 내부 변수 초기화

useMemo를 사용했다면?

렌더링 → Component 함수 호출 & Memoization → 렌더링 -> Component 함수 호출 & Momoize 된 값을 재사용

useMemo는 어떤 조건을 만족해야만 특정 변수들이 초기화 되게 할 수 있다.

 

useMemo의 기본 API

import { memo } from "react";

const MyComponent = ({ prop1, prop2 }) => {
  // ... 컴포넌트 코드 ...
};

const MemoizedMyComponent = memo(MyComponent);

// MemoizedMyComponent를 사용하여 컴포넌트 렌더링

useMemo()

import {useMemo} from "react";
const value = useMemo(()=> {
	return calculate();
}, []);

• 첫번째 인자: 콜백함수 - memoization할 값을 계산해서 리턴
• 두번째 인자: 배열 - 의존성 배열 : 빈 배열이면 처음 마운트 됐을 때만 값을 계산, value가 들어간 경우 업데이트 될 때마다 moization된 값을 꺼낸다.