데이터를 캐시하는 useMemo
컴포넌트가 재렌더링되면 컴포넌트 내에 존재하는 변수 및 함수들을 재평가되기 때문에 다시 실행.
리액트는 과거에 계산한 값을 반복해서 사용할 수 있도록 useMemo를 통해 값을 캐시하는 방법을 제공.
import { useMemo } from 'react';
const cachedData = useMemo(callback, [deps])
ReactJS에서의 메모이제이션은 순수함수에 들어가는 매개변수의 값이 같을 경우 객체를 새로 생성하는 것이 아니라 이전에 참조하던 객체의 주소를 그대로 사용한다. 이 데이터는 힙 메모리에 저장된다.
캐싱 작업은 명시적으로 데이터를 캐시 메모리에 저장함으로써 이루어진다.
메모이제이션은 메모리 캐시, 디스크 캐시, 브라우저 캐시, 분산 캐시 그 어디에도 소속되지 않는다. 메모이제이션은 과연 캐싱인가???
→ 그렇다고 한다.
캐싱 Caching
: 오래 걸리는 연산 결과나 데이터를 저장해두고 이를 재사용함으로써 처리 시간을 줄이는 것을 뜻한다.
useMemo는 만능이 아니라고 한다. useMemo를 통해 캐시한 데이터는 리액트가 메모리에서 관리하는 데이터이기 때문에 적절한 트레이드오프를 통해 캐시가 필요한 데이터만 useMEmo를 사용하도록 하자.
실제 적용 후기
* 참고 https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/* 참고
* 참고
* 참고
* 참고
* 참고