천진난만 코딩 스토리
2023.06.01) 캐시의 장단점과 활용 본문
1. 캐시란?
캐시란 자주 사용하는 데이터나 값을 미리 복사해 놓은 임시 장소를 의미한다.
캐시를 통해 이전에 접근한 데이터를 다시 불러올 때 속도를 향상시키고 데이터 처리 속도를 높일 수 있다.
1) 장점
- 접근 시간과 계산시간을 절약하여 빠른속도로 데이터에 접근할 수 있습니다.
- 캐시에 저장된 데이터를 다시 불러오면 데이터 처리에 필요한 리소스를 절약할 수 있다.
2) 단점
- 비용이 비싸다.
- 데이터를 미리 저장하기 때문에 저장 용량이 한정되어 있다.
- 리액트에서는 캐싱을 위해 이 데이터가 원래 저장되어진 데이터와 같은지 비교하는 연산이 추가되기 때문에, 적합한 상황에 사용하지 않는다면 오히려 손해를 보는 경우가 생길 수 있다.
3) 프론트엔드에서 캐시의 활용
① 브라우저 캐싱에 사용
브라우저는 이전에 방문했던 페이지나 이미지를 캐싱을 한다.
다음에 이 데이터가 필요할 때, 서버로 요청하지 않고 캐시메모리에서 바로 응답 받을 수 있어 속도를 올릴 수 있다.
우리가 한 번 접속한 사이트에 다시 접속할 때 속도가 빠른 이유가 바로 이 캐시때문이다.
② 리액트에서 React.memo, useCallback, useMemo를 이용해 사용
개발자가 부모컴포넌트를 렌더링할 때 자식컴포넌트가 불필요한 리렌더링을 하지 않도록 캐싱해주는 역할을 한다.
고비율의 연산을 방지해주는 기능을 수행할 수 있다.
'TIL(Today I Learned)' 카테고리의 다른 글
2023.06.02) position의 사용법 (0) | 2023.06.02 |
---|---|
2023.06.02) HTTP & HTTP의 메세지 구조 (0) | 2023.06.02 |
2023.06.01) 프레임워크와 라이브러리 차이점 (0) | 2023.06.01 |
2023.05.31) parameter & argument (0) | 2023.05.31 |
2023.05.31) Hoisting & TDZ (0) | 2023.05.31 |