1. 캐싱이 필요한 이유

리액트는 동적으로 UI를 업데이트하는 라이브러리이기 때문에 데이터 요청 및 상태 업데이트가 빈번하게 발생합니다. 이 과정에서 동일한 데이터를 여러 번 요청하거나, 리렌더링이 반복되면 성능 문제가 발생할 수 있기에 이를 관리하기 위한 방법으로 캐싱이 활용됩니다.

편의를 위해 아래로는 음슴체를 사용하겠습니다.

2. React Query (e.g @tanstack/react-query) 사용

• 서버 상태를 관리하고, 가져온 데이터를 캐시에 저장.
• 동일한 데이터를 요청할 때 캐시를 우선 사용.
• 자동 리패칭: 데이터가 오래되면 자동으로 새로 가져오기.

3. local storage 저장

• 브라우저의 localStorage 활용해 데이터를 저장.
• 새로고침 후에도 데이터 유지 가능.
• 이번 프로젝트에서 TTL 기반으로 데이터 관리를 진행했기 때문에 활용한 방법.

1. 데이터를 저장 (key, value, TTL 지정)
2. 데이터를 가져오기 (key로 검색)
3. 특정 키의 데이터를 제거
4. 모든 만료된 데이터를 정리

4. React.memo와 useMemo 활용

• React.memo: 동일한 props로 호출되는 컴포넌트를 리렌더링하지 않음.
• useMemo: 계산 비용이 높은 값이나 결과를 캐싱.