React의 데이터 캐싱은 동일한 데이터를 여러 번 가져올 필요성을 줄여 성능과 사용자 경험을 크게 향상시킬 수 있습니다. React에서 데이터 캐싱을 구현하는 몇 가지 접근 방식은 다음과 같습니다.

1. 상태 관리 라이브러리 사용

• Redux: Redux를 사용하여 중앙 저장소에 데이터를 저장합니다. Redux 상태에서 API 응답을 캐시하고 아직 사용할 수 없는 경우에만 데이터를 가져올 수 있습니다.
• React Query: 이 라이브러리는 서버 상태에 대한 내장 캐싱 메커니즘을 제공합니다. API 응답을 자동으로 캐시하고 필요에 따라 다시 가져옵니다.
• Recoil: Redux와 유사하게 Recoil을 사용하면 전역 상태를 관리할 수 있으며 선택기를 사용하여 캐싱 전략을 구현할 수 있습니다.

2. 로컬 저장소 또는 세션 저장소

브라우저의 로컬 저장소 또는 세션 저장소에 데이터를 캐시할 수 있습니다.

const fetchData = async () => {
    const cachedData = localStorage.getItem('myData');
    if (cachedData) {
        return JSON.parse(cachedData);
    }

    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    localStorage.setItem('myData', JSON.stringify(data));
    return data;
};

// Use it in your component
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData();
        setData(data);
    };
    loadData();
}, []);

3. 사용자 정의 캐싱 논리

자바스크립트 객체를 사용하여 고유한 캐싱 메커니즘을 구현하여 고유 키를 기반으로 데이터를 저장할 수 있습니다.

const cache = {};

const fetchData = async (key) => {
    if (cache[key]) {
        return cache[key];
    }

    const response = await fetch(`https://api.example.com/data/${key}`);
    const data = await response.json();
    cache[key] = data; // Cache the data
    return data;
};

// Use it in your component
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData('myKey');
        setData(data);
    };
    loadData();
}, []);

4. 서비스 워커

고급 캐싱을 위해 서비스 워커를 사용하여 API 응답을 캐시하고 캐시에서 직접 제공할 수 있습니다.

5. useMemo나 useCallback으로 메모하기

가져온 데이터에서 파생된 계산된 데이터를 처리하는 경우 useMemo를 사용하여 값을 메모하세요.

const memoizedValue = useMemo(() => computeExpensiveValue(data), [data]);

결론

데이터 최신성, 복잡성, 사용자 경험과 같은 요소를 고려하여 애플리케이션 요구 사항에 가장 적합한 캐싱 전략을 선택하세요. React Query와 같은 라이브러리는 캐싱 및 데이터 가져오기를 단순화할 수 있는 반면 수동 방법을 사용하면 더 많은 제어가 가능합니다.