웹 응답값 유지가 되는 방법

1. 상황

리액트를 사용중이며 API로 응답값을 받은 이후, API 서버가 죽은 상태에서도 값이 그대로 남아 있는 현상

---

2. 원인

1. React 상태(state)에 데이터가 남아 있음

• API 호출 후 응답 데이터를 useState로 저장하면, API 서버가 죽어도 상태값이 유지되므로 화면에는 기존 데이터가 계속 표시됨.
• 해결 방법: API 호출 실패 시 상태를 초기화하거나, 화면에서 데이터를 숨기는 로직 추가.

const [data, setData] = useState(null); 
useEffect(() => { 
	axios.get('/api/data')
    	.then(res => setData(res.data))
        .catch(() => setData(null)); // 에러 발생 시 상태 초기화 
}, []);

---

 

2. 브라우저 캐싱 (HTTP 캐시)

• API 응답이 브라우저 캐시에 저장되면, 서버가 죽어도 캐시된 데이터를 반환할 수 있음.
• 응답 헤더에서 Cache-Control이 public, max-age=xxx로 설정되어 있다면 캐싱될 가능성이 있음.
• 해결 방법: API 요청 시 캐싱을 방지하는 헤더 추가.

 

 

 

---

3. React Query, SWR 같은 라이브러리 사용

• react-query, swr 같은 라이브러리를 사용하면 자동 캐싱이 적용될 수 있음.
• 해결 방법: 캐시를 무효화하는 옵션을 사용.

const { data, refetch } = useQuery('dataKey', fetchData, 
	{ cacheTime: 0 // 캐시 사용 안 함 }
);

 

---

4. Service Worker (PWA)

• PWA(Service Worker)가 활성화된 경우 API 응답이 캐싱되어 있을 수 있음.
• 해결 방법: DevTools > Application > Service Workers에서 Service Worker를 삭제.

---

결론

Axios 자체적으로 캐싱하지 않지만, React 상태, 브라우저 캐시, 라이브러리, Service Worker 등 여러 요소로 인해 데이터가 유지될 수 있음.
서버가 죽은 후에도 데이터가 남아있다면, 위 원인 중 하나를 확인하고 해결하면 됩니다!