천진난만 코딩 스토리

2023.06.01) 캐시의 장단점과 활용 본문

TIL(Today I Learned)

2023.06.01) 캐시의 장단점과 활용

Wisdom_1104 2023. 6. 1. 11:42

1. 캐시란?

캐시란 자주 사용하는 데이터나 값을 미리 복사해 놓은 임시 장소를 의미한다.

캐시를 통해 이전에 접근한 데이터를 다시 불러올 때 속도를 향상시키고 데이터 처리 속도를 높일 수 있다.

 

1) 장점

  • 접근 시간과 계산시간을 절약하여 빠른속도로 데이터에 접근할 수 있습니다. 
  • 캐시에 저장된 데이터를 다시 불러오면 데이터 처리에 필요한 리소스를 절약할 수 있다.

 

2) 단점

  • 비용이 비싸다. 
  • 데이터를 미리 저장하기 때문에 저장 용량이 한정되어 있다.
  • 리액트에서는 캐싱을 위해 이 데이터가 원래 저장되어진 데이터와 같은지 비교하는 연산이 추가되기 때문에,
  •      적합한 상황에 사용하지 않는다면 오히려 손해를 보는 경우가 생길 수 있다.

 

3) 프론트엔드에서 캐시의 활용

① 브라우저 캐싱에 사용

브라우저는 이전에 방문했던 페이지나 이미지를 캐싱을 한다.

다음에 이 데이터가 필요할 때, 서버로 요청하지 않고 캐시메모리에서 바로 응답 받을 수 있어 속도를 올릴 수 있다.

우리가 한 번 접속한 사이트에 다시 접속할 때 속도가 빠른 이유가 바로 이 캐시때문이다.

 

② 리액트에서 React.memo, useCallback, useMemo를 이용해 사용

개발자가 부모컴포넌트를 렌더링할 때 자식컴포넌트가 불필요한 리렌더링을 하지 않도록 캐싱해주는 역할을 한다.

고비율의 연산을 방지해주는 기능을 수행할 수 있다.