⚛️ 리액트 개발 환경 세팅: CRA vs Vite

"왜 내 앱은 자꾸 로딩만 돌까?"
그 답은 데이터의 유통기한과 보관기한에 있습니다.

---

🤔 매번 새로고침 되는 화면, 지겹지 않으신가요?

웹 사이트나 앱을 이용하다 보면, 페이지를 이동했다가 다시 돌아왔을 때 똑같은 데이터를 보는데도 '로딩 중...' 표시가 뜨는 경험을 해보셨을 겁니다.
사용자 입장에서는 "아까 불러온 건데 왜 또 기다려야 하지?"라는 답답함이 생기기 마련입니다.
개발자 입장에서도 서버에 불필요한 요청을 계속 보내는 것은 리소스 낭비이자 성능 저하의 주범이 됩니다.

💡 여기서 등장하는 구세주, React Query!

React Query는 서버 상태를 관리하는 강력한 라이브러리입니다.
하지만 많은 분들이 가장 헷갈려 하는 두 가지 개념이 바로 Stale Time(상한 시간)과 Cache Time(캐시 시간)입니다.
이 두 가지만 제대로 이해해도 앱의 속도를 비약적으로 향상시킬 수 있습니다.

오늘은 복잡한 코드가 아닌, 일상생활의 쉬운 비유를 통해 이 두 개념을 완벽하게 정리해 드리겠습니다.

---

🍅 Stale Time: 데이터의 '신선도' 유통기한

먼저 Stale Time에 대해 알아보겠습니다.
'Stale'은 영어로 '신선하지 않은', '오래된'이라는 뜻을 가지고 있습니다.
즉, 데이터가 얼마나 오랫동안 신선한 상태(Fresh)로 간주될 것인가를 설정하는 시간입니다.

🛒 마트 장보기 비유

• 1. Fresh 상태: 갓 구운 빵을 샀습니다. 1분 뒤에 누가 "빵 줄까?"라고 하면, 굳이 빵집에 다시 갈 필요가 없습니다. 방금 산 빵이 여전히 따뜻하고 신선하니까요.
  👉 서버 요청 없이 기존 데이터를 그대로 사용합니다.
• 2. Stale 상태: 빵을 산 지 3일이 지났습니다. "빵 줄까?"라고 하면 고민이 됩니다. 곰팡이가 폈을 수도 있으니 빵집에 가서 새 빵을 사오는 게 안전합니다.
  👉 데이터가 상했다고 판단하고, 서버에 다시 요청(Refetch)을 보냅니다.

⚠️ 주의할 점!
React Query에서 staleTime의 기본값은 0초입니다.
즉, 데이터를 가져오자마자 "이건 상한 데이터야!"라고 판단하고, 다음 번에 필요할 때 바로 다시 요청을 보냅니다.
따라서, 자주 변하지 않는 데이터라면 이 시간을 적절히 늘려주는 것이 성능 최적화의 첫걸음입니다.

---

🗑️ Cache Time: 쓰레기통 비우는 시간

다음은 Cache Time(gcTime)입니다.
이것은 데이터가 메모리에 얼마나 오랫동안 남아있을지를 결정합니다.
사용자가 화면을 벗어나서 해당 데이터가 더 이상 쓰이지 않게 되었을 때(Inactive 상태), 이 데이터를 즉시 지울지 아니면 혹시 모르니 잠깐 놔둘지를 정하는 것입니다.

🏠 집 청소 비유

여러분이 방금 먹은 과자 봉지를 생각해보세요.

1. 다 먹은 과자 봉지(Inactive Data)를 책상 위에 올려둡니다.
2. Cache Time 내: 5분 뒤에 다시 과자 봉지의 성분표를 보고 싶다면, 쓰레기통을 뒤질 필요 없이 책상 위의 봉지를 다시 보면 됩니다.
3. Cache Time 경과: 30분이 지나 청소를 하면서 봉지를 쓰레기통에 버렸습니다(메모리 해제). 이제 성분표를 보려면 마트에 가서 과자를 다시 사와야 합니다.

📝 핵심 요약
데이터가 Stale(상한) 상태라도 Cache Time(보관 기간)이 남아있다면, 일단 캐시된 데이터를 보여주고 뒤에서 몰래 새로운 데이터를 가져옵니다.
이것이 바로 사용자가 "로딩 없이 빠르다"고 느끼게 만드는 비결입니다.

---

📊 한눈에 비교하는 차이점

두 개념이 아직 헷갈리신다면 아래 표를 참고하세요.

구분	Stale Time	Cache Time (gcTime)
핵심 질문	"이 데이터, 다시 받아와야 해?"	"이 데이터, 메모리에서 지워야 해?"
기본값	0초 (즉시 상함)	5분
동작 시점	데이터를 다시 조회할 때 (Refetch 여부 결정)	데이터가 사용되지 않을 때 (Inactive 상태 진입 시)

---

🎓 마치며: 최적의 설정값 찾기

React Query는 복잡한 서버 상태 관리를 놀라울 정도로 단순하게 만들어줍니다.
하지만 기본값(staleTime: 0)을 그대로 사용하면, React Query의 진정한 성능상 이점을 누리기 어렵습니다.

✅ 실전 적용 가이드

• 자주 변하는 데이터(예: 주식 가격, 실시간 채팅): staleTime을 짧게 유지하세요.
• 거의 변하지 않는 데이터(예: 마이페이지 프로필, 공지사항): staleTime을 Infinity나 5분 이상으로 길게 설정하세요. 불필요한 네트워크 요청을 획기적으로 줄일 수 있습니다.
• 캐시 타임: 기본값 5분이면 충분하지만, 메모리가 중요한 모바일 환경에서는 상황에 따라 조절이 필요합니다.

이제 여러분의 프로젝트 코드를 열어보세요.
무심코 지나쳤던 useQuery 옵션에 작은 변화를 주는 것만으로도, 사용자에게 훨씬 쾌적한 경험을 선물할 수 있습니다.
다음에는 더 흥미로운 최적화 팁으로 찾아오겠습니다!