2. 나중에 SampleB라는 컴포넌트가 화면에 마운트되고, 이 컴포넌트도 useQuery('articles', getArticles)를 사용합니다.

- SampleB가 화면에 나타나는 순간, SampleA에서 불러온 데이터를 그대로 보여줍니다.

- 캐시 키를 통하여 해당 데이터가 유효한지 확인합니다. 지금 상황은 데이터가 유효하지 않기 때문에 재요청합니다.

- 재요청이 끝나면 새로운 데이터가 SampleB와 SampleA에 모두 반영됩니다. 요청은 한 번만 하지만, 해당 캐시 키를 사용하는 useQuery Hook에 모두 반영됩니다.

3. SampleA와 SampleB가 모두 언마운트됩니다.

- 같은 캐시 키를 가진 useQuery를 사용하는 컴포넌트가 화면에서 모두 언마운트되면 cacheTime 5분 동안 데이터가 유지됩니다.

4. 5분 안에 SampleA 컴포넌트가 다시 마운트됩니다.

- 컴포넌트가 처음 보일 때 이전에 불러온 데이터를 그대로 사용합니다.

- 데이터가 유효하지 않기 때문에 재요청하고, 새로운 데이터로 대체합니다.

5. SampleA 컴포넌트가 언마운트되고 5분 뒤에 다시 마운트됩니다.

- 5분이 지났기 때문에 캐시에서 기존 데이터가 제거됐습니다. data가 undefined이며, 새로 요청합니다.