캐시의 장단점과 어떤 부분에 활용하는지 ? FE에서 캐시를 사용할 수 있는 영역

캐시란?

캐시(Cache)는 웹 브라우저가 자주 사용하는 데이터나 자원을 로컬 저장소에 임시로 저장해 두는 것

캐시의 장점

성능 향상: 캐시를 사용하면 원래의 데이터 소스(예: 서버)에서 데이터를 다시 가져오지 않아도 되므로 응답 시간이 빨라짐
서버 부하 감소: 캐시에 데이터를 저장하면 서버의 요청 처리량이 감소하여 전체 시스템의 부하를 줄일 수 있음

캐시의 단점

데이터 일관성: 캐시된 데이터가 원본 데이터와 일치하지 않는 경우 데이터 일관성 문제가 발생
저장 공간: 캐시는 추가적인 저장 공간을 사용하기 때문에, 가용한 저장 공간에 비례하여 캐시 크기가 결정
관리 복잡성: 캐시 정책과 만료 시간 등 캐시 관련 설정을 관리하기 위해서는 추가적인 관리 노력이 필요

 

프론트엔드에서 캐시를 사용할 수 있는 영역

React Query: React Query는 기본적으로 쿼리 결과를 메모리 캐시에 저장하고, 필요에 따라 로컬 스토리지 같은곳에 영속적인 캐싱도 지원합니다. 이렇게 캐시된 데이터를 활용하여 중복 API 호출을 방지하고, 데이터를 빠르게 불러와 UI를 업데이트할 수 있습니다.

 

메모이제이션(Memoization): 비용이 큰 계산 결과를 클라이언트 측 메모리에 저장하여 중복 계산이나 요청을 방지합니다. React에서 useMemo는 함수형 컴포넌트에서 계산 비용이 큰 값의 결과를 메모리에 캐싱하는 데 사용되며, 이를 통해 성능 최적화를 수행할 수 있습니다.