cache

 

🎯 Cache(캐시)란 무엇인가요?

캐시는 자주 사용하는 데이터를 빠르게 접근할 수 있도록 저장해두는 임시 저장소예요.

• 데이터를 미리 저장해두고 필요할 때 빠르게 꺼내 쓸 수 있게 해주는 역할을 합니다.
• 예를 들어, 인터넷 브라우저도 자주 방문하는 웹사이트의 데이터를 캐시에 저장해서 다음에 방문할 때 빠르게 보여줘요.

 

🍕 비유로 이해하기: 피자 가게 이야기

여러분이 피자 가게를 운영하고 있다고 생각해 보세요. 🍕

1. 캐시가 없는 경우
   손님이 피자를 주문할 때마다 반죽부터 굽고, 재료를 준비해야 해요.
   → 시간이 오래 걸리겠죠?
2. 캐시가 있는 경우
   인기 메뉴인 마르게리타 피자를 **미리 만들어서 냉장고(캐시)**에 보관해둬요.
   손님이 마르게리타 피자를 주문하면 바로 꺼내서 제공할 수 있어요.
   → 훨씬 빠르게 제공할 수 있겠죠?

React의 캐시는 이 **"미리 저장해둔다"**는 개념과 같아요.
자주 사용하는 데이터를 미리 저장해두고, 다시 사용할 때 빠르게 꺼내오는 거죠.

 

🛠️ React에서 Cache는 어떻게 사용될까요?

React에서 캐시는 주로 데이터를 가져올 때(fetch) 사용됩니다.
예를 들어, 서버에서 데이터를 가져와 화면에 보여줄 때 캐시를 사용하면 성능이 훨씬 좋아져요.

 

📦 React Query를 통한 캐시 예제

React의 상태 관리 라이브러리 중 하나인 React Query를 사용해 데이터를 가져오고 캐시에 저장하는 예제를 보여드릴게요.

 

1. 데이터를 캐싱하는 코드

import { useQuery } from '@tanstack/react-query';

async function fetchPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
}

function Posts() {
  // React Query로 데이터 가져오기
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'], // 캐시에 저장될 키
    queryFn: fetchPosts, // 데이터를 가져오는 함수
    staleTime: 1000 * 60 * 5, // 5분 동안 캐시 유지
  });

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생: {error.message}</p>;

  return (
    <div>
      <h1>포스트 목록</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

🔍 코드 설명

1. 데이터를 캐시에 저장
   • queryKey: ['posts']: React Query는 이 키를 사용해서 데이터를 캐시에 저장합니다.
   • 같은 키로 요청하면 캐시된 데이터를 사용해 빠르게 화면을 업데이트해요.
2. staleTime
   • 캐시에 저장된 데이터는 5분(300초) 동안 "신선"하다고 간주돼요.
   • 이 시간 내에는 서버에 다시 요청하지 않고 캐시된 데이터를 사용합니다.
3. 로딩 및 에러 처리
   • 데이터를 가져오는 동안 **로딩 중...**을 표시하고, 에러가 발생하면 메시지를 보여줍니다.

 

🚀 캐시의 장점

1. 빠른 로딩
   • 서버에 매번 요청하지 않고 캐시에 저장된 데이터를 사용하니까 로딩 속도가 빠릅니다.
2. 서버 요청 줄이기
   • 캐시를 사용하면 불필요하게 서버에 요청하는 횟수를 줄일 수 있어서 성능 최적화에 도움이 돼요.
3. 유연한 데이터 관리
   • staleTime과 같은 설정을 통해 캐시의 유효 시간을 조절할 수 있어요.

 

🔄 캐시가 업데이트될 때

캐시는 데이터가 오래되면(예: staleTime이 지나면) 새 데이터를 가져오고 캐시를 업데이트합니다.
이 과정이 자동으로 일어나기 때문에 개발자는 복잡한 설정을 할 필요 없이 데이터를 신선하게 유지할 수 있어요.

 

 

🌟 한 줄 요약

**Cache(캐시)**는 자주 사용하는 데이터를 미리 저장해서 필요할 때 빠르게 가져오는 기술이에요.
React에서는 주로 데이터 로딩 속도를 높이고 서버 요청을 줄이기 위해 사용됩니다.