import React, { experimental_useCache, Suspense } from 'react';

// API 호출 시뮬레이션 (실제 API 엔드포인트로 대체)
const fetchUserData = async (userId) => {
  console.log(`Fetching user data for user ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // 네트워크 지연 시뮬레이션
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user data: ${response.status}`);
  }
  return response.json();
};

// fetchUserData 함수의 캐시된 버전 생성
const getCachedUserData = experimental_useCache(fetchUserData);

function UserProfile({ userId }) {
  const userData = getCachedUserData(userId);

  return (
    

      
User Profile
      
Name: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Loading user data...

설명:

1. experimental_useCache 가져오기: React에서 필요한 훅을 가져옵니다.
2. fetchUserData 정의: 이 함수는 API에서 사용자 데이터를 가져오는 것을 시뮬레이션합니다. 모의 API 호출을 실제 데이터 가져오기 로직으로 바꾸세요. await new Promise는 네트워크 지연을 시뮬레이션하여 캐싱 효과를 더 명확하게 합니다. 프로덕션 준비를 위해 오류 처리가 포함되었습니다.
3. getCachedUserData 생성: experimental_useCache를 사용하여 fetchUserData 함수의 캐시된 버전을 만듭니다. 이것이 실제로 컴포넌트에서 사용할 함수입니다.
4. UserProfile에서 getCachedUserData 사용: UserProfile 컴포넌트는 getCachedUserData를 호출하여 사용자 데이터를 검색합니다. experimental_useCache를 사용하고 있으므로 데이터가 이미 사용 가능한 경우 캐시에서 데이터가 검색됩니다.
5. Suspense로 래핑: UserProfile 컴포넌트는 Suspense로 래핑되어 데이터가 로드되는 동안 로딩 상태를 처리합니다. 이렇게 하면 데이터 로드에 시간이 걸리더라도 부드러운 사용자 경험을 보장할 수 있습니다.
6. 여러 번 호출: App 컴포넌트는 동일한 userId(1)를 가진 두 개의 UserProfile 컴포넌트를 렌더링합니다. 두 번째 UserProfile 컴포넌트는 캐시된 데이터를 사용하므로 두 번째 API 호출을 방지합니다. 또한 캐시되지 않은 데이터 가져오기를 시연하기 위해 다른 ID를 가진 다른 사용자 프로필도 포함되어 있습니다.

이 예제에서 첫 번째 UserProfile 컴포넌트는 API에서 사용자 데이터를 가져옵니다. 그러나 두 번째 UserProfile 컴포넌트는 캐시된 데이터를 사용하므로 두 번째 API 호출을 방지합니다. API 호출이 비용이 많이 들거나 여러 컴포넌트에서 데이터에 액세스하는 경우 이는 성능을 크게 향상시킬 수 있습니다.

Suspense와 통합

experimental_useCache는 React의 Suspense 기능과 원활하게 작동하도록 설계되었습니다. Suspense를 사용하면 데이터 로딩을 기다리는 컴포넌트의 로딩 상태를 선언적으로 처리할 수 있습니다. experimental_useCache를 Suspense와 함께 사용하면 React는 데이터가 캐시에서 사용 가능해지거나 데이터 소스에서 가져올 때까지 컴포넌트 렌더링을 자동으로 일시 중단합니다. 이렇게 하면 데이터가 로드되는 동안 대체 UI(예: 로딩 스피너)를 표시하여 더 나은 사용자 경험을 제공할 수 있습니다.

위의 예에서 Suspense 컴포넌트는 UserProfile 컴포넌트를 래핑하고 fallback prop을 제공합니다. 이 대체 UI는 사용자 데이터가 가져와지는 동안 표시됩니다. 데이터가 사용 가능해지면 UserProfile 컴포넌트가 가져온 데이터로 렌더링됩니다.

React Server Components (RSCs) 및 experimental_useCache

experimental_useCache는 React Server Components와 함께 사용할 때 빛을 발합니다. RSC에서는 서버에서 데이터 가져오기가 발생하고 결과가 클라이언트로 스트리밍됩니다. experimental_useCache는 여러 컴포넌트가 동일한 데이터를 필요로 하더라도 요청당 한 번만 데이터를 가져오도록 보장함으로써 서버 측 데이터 가져오기를 크게 최적화할 수 있습니다.

사용자 데이터를 가져와 UI의 여러 부분에 표시해야 하는 서버 컴포넌트가 있다고 가정해 보겠습니다. experimental_useCache가 없으면 비효율적일 수 있는 여러 번 사용자 데이터를 가져올 수 있습니다. experimental_useCache를 사용하면 사용자 데이터가 한 번만 가져와지고 동일한 서버 요청 내에서 후속 용도로 캐싱되도록 보장할 수 있습니다.

예제 (개념적 RSC 예제):

// Server Component
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // 데이터베이스에서 사용자 데이터 가져오기 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 500)); // 데이터베이스 쿼리 지연 시뮬레이션
  return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

export default async function UserDashboard({ userId }) {
  const userData = await getCachedUserData(userId);

  return (
    

      
Welcome, {userData.name}!
      
      
    
  );
}

async function UserInfo({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
User Information
      
Email: {userData.email}
    
  );
}

async function UserActivity({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
Recent Activity
      
{userData.name} viewed the homepage.
    
  );
}

이 단순화된 예제에서 UserDashboard, UserInfo, UserActivity는 모두 서버 컴포넌트입니다. 모두 사용자 데이터에 액세스해야 합니다. experimental_useCache를 사용하면 여러 컴포넌트에서 사용되더라도 서버 요청당 fetchUserData 함수가 한 번만 호출되도록 보장합니다.

고려 사항 및 잠재적 단점

experimental_useCache는 상당한 이점을 제공하지만, 그 한계와 잠재적 단점을 인지하는 것이 중요합니다.

• 실험적 상태: 실험적인 API로서 experimental_useCache는 향후 React 릴리스에서 변경되거나 제거될 수 있습니다. 프로덕션 환경에서는 주의해서 사용하고 필요한 경우 코드를 조정할 준비를 하십시오. 업데이트에 대한 React의 공식 문서 및 릴리스 노트를 모니터링하십시오.
• 캐시 무효화: experimental_useCache는 캐시 무효화를 위한 내장 메커니즘을 제공하지 않습니다. 기본 데이터가 변경될 때 캐시를 무효화하기 위한 자체 전략을 구현해야 합니다. 이는 사용자 정의 훅 또는 컨텍스트 제공자를 사용하여 캐시 수명을 관리하는 것을 포함할 수 있습니다.
• 메모리 사용량: 데이터 캐싱은 메모리 사용량을 늘릴 수 있습니다. 캐싱하는 데이터의 크기를 염두에 두고 캐시 제거 또는 만료와 같은 기술을 사용하여 메모리 소비를 제한하는 것을 고려하십시오. 특히 서버 측 환경에서 애플리케이션의 메모리 사용량을 모니터링하십시오.
• 인수 직렬화: 캐시된 함수에 전달되는 인수는 직렬화 가능해야 합니다. 이는 experimental_useCache가 캐시 키를 생성하기 위해 인수를 사용하기 때문입니다. 인수가 직렬화 가능하지 않으면 캐시가 제대로 작동하지 않을 수 있습니다.
• 디버깅: 캐싱 문제 디버깅은 어려울 수 있습니다. 로깅 및 디버깅 도구를 사용하여 캐시를 검사하고 예상대로 작동하는지 확인하십시오. 캐시가 채워지고 캐시에서 검색될 때를 추적하기 위해 fetchUserData 함수에 사용자 정의 디버그 로깅을 추가하는 것을 고려하십시오.
• 전역 상태: 캐시된 함수 내에서 전역 가변 상태를 사용하지 마십시오. 이는 예상치 못한 동작을 유발하고 캐시를 이해하기 어렵게 만들 수 있습니다. 일관된 상태를 유지하기 위해 함수 인수 및 캐시된 결과에 의존하십시오.
• 복잡한 데이터 구조: 특히 순환 참조가 포함된 복잡한 데이터 구조를 캐싱할 때는 주의하십시오. 순환 참조는 직렬화 중에 무한 루프 또는 스택 오버플로 오류를 유발할 수 있습니다.

캐시 무효화 전략

experimental_useCache는 무효화를 처리하지 않으므로 다음과 같은 전략을 사용할 수 있습니다.

• 수동 무효화: 데이터 변경을 추적하기 위한 사용자 정의 훅 또는 컨텍스트 제공자를 구현합니다. 변경이 발생하면 캐시된 함수를 재설정하여 캐시를 무효화합니다. 여기에는 변경 시 변경되는 버전 또는 타임스탬프를 저장하고 `fetch` 함수 내에서 이를 확인하는 것이 포함됩니다.

       
       import React, { createContext, useContext, useState, experimental_useCache } from 'react';
  
       const DataVersionContext = createContext(null);
  
       export function DataVersionProvider({ children }) {
         const [version, setVersion] = useState(0);
         const invalidate = () => setVersion(v => v + 1);
  
         return (
           
             {children}
           
         );
       }
  
       async function fetchData(version) {
          console.log("Fetching data with version:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Data for version ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // 캐시 호출
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // 예제 사용법:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Invalidate Cache
       }
  
       // App을 DataVersionProvider로 래핑
       // 
       //   
       //   
       // 
       
       

• 시간 기반 만료: 특정 시간이 지난 후 캐시를 자동으로 무효화하는 캐시 만료 메커니즘을 구현합니다. 이는 비교적 정적이지만 때때로 변경될 수 있는 데이터에 유용할 수 있습니다.
• 태그 기반 무효화: 캐시된 데이터에 태그를 연결하고 이러한 태그를 기반으로 캐시를 무효화합니다. 이는 특정 데이터가 변경될 때 관련 데이터를 무효화하는 데 유용할 수 있습니다.
• 웹소켓 및 실시간 업데이트: 애플리케이션이 웹소켓 또는 기타 실시간 업데이트 메커니즘을 사용하는 경우 이러한 업데이트를 사용하여 캐시 무효화를 트리거할 수 있습니다. 실시간 업데이트가 수신되면 영향을 받는 데이터에 대한 캐시를 무효화합니다.

experimental_useCache 사용을 위한 모범 사례

experimental_useCache를 효과적으로 사용하고 잠재적 함정을 피하려면 다음 모범 사례를 따르십시오.

• 비용이 많이 드는 작업에 사용: 실제로 비용이 많이 드는 작업(예: 데이터 가져오기 또는 복잡한 계산)에만 experimental_useCache를 사용하십시오. 비용이 적은 작업을 캐싱하면 캐시 관리의 오버헤드로 인해 실제로 성능이 저하될 수 있습니다.
• 명확한 캐시 키 정의: 캐시된 함수에 전달되는 인수가 캐시되는 데이터를 고유하게 식별하는지 확인하십시오. 이는 캐시가 올바르게 작동하고 데이터가 실수로 재사용되지 않도록 하는 데 중요합니다. 객체 인수의 경우 직렬화 및 해싱하여 일관된 키를 생성하는 것을 고려하십시오.
• 캐시 무효화 전략 구현: 앞서 언급했듯이 기본 데이터가 변경될 때 캐시를 무효화하기 위한 자체 전략을 구현해야 합니다. 애플리케이션 및 데이터에 적합한 전략을 선택하십시오.
• 캐시 성능 모니터링: 캐시 성능을 모니터링하여 예상대로 작동하는지 확인하십시오. 로깅 및 디버깅 도구를 사용하여 캐시 히트 및 미스를 추적하고 잠재적 병목 현상을 식별하십시오.
• 대안 고려: experimental_useCache를 사용하기 전에 다른 캐싱 솔루션이 필요에 더 적합할 수 있는지 고려하십시오. 예를 들어, 캐시 무효화 및 제거와 같은 내장 기능이 있는 보다 강력한 캐싱 솔루션이 필요한 경우 전용 캐싱 라이브러리를 사용하는 것을 고려할 수 있습니다. react-query, SWR과 같은 라이브러리 또는 localStorage를 사용하는 것도 때로는 더 적절할 수 있습니다.
• 작게 시작: 애플리케이션에 experimental_useCache를 점진적으로 도입합니다. 몇 가지 핵심 데이터 가져오기 작업을 캐싱하는 것부터 시작하고 경험을 쌓으면서 사용을 점차 확대하십시오.
• 캐싱 전략 문서화: 어떤 데이터가 캐시되고 있는지, 캐시가 어떻게 무효화되고 있는지, 잠재적 한계는 무엇인지 등 캐싱 전략을 명확하게 문서화합니다. 이렇게 하면 다른 개발자가 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.
• 철저히 테스트: 캐싱 구현이 올바르게 작동하고 예상치 못한 버그를 도입하지 않는지 확인하기 위해 철저히 테스트하십시오. 캐시가 예상대로 채워지고 무효화되는지 확인하기 위해 단위 테스트를 작성하십시오.

experimental_useCache의 대안

experimental_useCache는 React 내에서 캐싱을 관리하는 편리한 방법을 제공하지만 유일한 옵션은 아닙니다. React 애플리케이션에서 사용할 수 있는 몇 가지 다른 캐싱 솔루션이 있으며, 각각 고유한 장단점이 있습니다.

• useMemo: useMemo 훅은 비용이 많이 드는 계산의 결과를 메모이제이션하는 데 사용할 수 있습니다. 렌더링 전반에 걸쳐 진정한 캐싱을 제공하지는 않지만 단일 컴포넌트 내에서 성능을 최적화하는 데 유용할 수 있습니다. 데이터 가져오기 또는 데이터가 컴포넌트 간에 공유되어야 하는 시나리오에는 덜 적합합니다.
• React.memo: React.memo는 함수형 컴포넌트를 메모이제이션하는 데 사용할 수 있는 고차 컴포넌트입니다. props가 변경되지 않은 경우 컴포넌트의 재렌더링을 방지합니다. 이렇게 하면 일부 경우에 성능이 향상될 수 있지만 데이터 캐싱은 제공하지 않습니다.
• 외부 캐싱 라이브러리 (react-query, SWR): react-query 및 SWR과 같은 라이브러리는 React 애플리케이션을 위한 포괄적인 데이터 가져오기 및 캐싱 솔루션을 제공합니다. 이러한 라이브러리는 자동 캐시 무효화, 백그라운드 데이터 가져오기, 낙관적 업데이트와 같은 기능을 제공합니다. 고급 기능이 있는 보다 강력한 캐싱 솔루션이 필요한 경우 좋은 선택이 될 수 있습니다.
• 로컬 스토리지 / 세션 스토리지: 더 간단한 사용 사례 또는 세션 전반에 걸쳐 데이터를 유지하기 위해 localStorage 또는 sessionStorage를 활용할 수 있습니다. 그러나 직렬화, 무효화 및 저장소 제한을 수동으로 관리해야 합니다.
• 사용자 정의 캐싱 솔루션: React의 컨텍스트 API 또는 기타 상태 관리 기술을 사용하여 사용자 정의 캐싱 솔루션을 구축할 수도 있습니다. 이렇게 하면 캐싱 구현에 대한 완전한 제어를 제공하지만 더 많은 노력과 전문성이 필요합니다.

결론

React의 experimental_useCache 훅은 React 애플리케이션 내에서 캐싱을 관리하는 강력하고 편리한 방법을 제공합니다. 비용이 많이 드는 작업의 결과를 캐싱함으로써 성능을 크게 향상시키고, 네트워크 요청을 줄이며, 데이터 가져오기 로직을 단순화할 수 있습니다. Suspense 및 React Server Components와 함께 사용하면 experimental_useCache는 사용자 경험을 더욱 향상시키고 서버 렌더링 성능을 최적화할 수 있습니다.

그러나 experimental_useCache의 한계와 잠재적 단점, 예를 들어 내장 캐시 무효화 부족 및 메모리 사용량 증가 가능성에 유의하는 것이 중요합니다. 이 가이드에 설명된 모범 사례를 따르고 애플리케이션의 특정 요구 사항을 신중하게 고려함으로써 experimental_useCache를 효과적으로 사용하여 상당한 성능 향상을 달성하고 더 나은 사용자 경험을 제공할 수 있습니다.

React의 실험적 API에 대한 최신 업데이트에 대한 정보를 얻고 필요한 경우 코드를 조정할 준비를 하십시오. React가 계속 발전함에 따라 experimental_useCache와 같은 캐싱 기술은 고성능 및 확장 가능한 웹 애플리케이션 구축에서 점점 더 중요한 역할을 할 것입니다.