인프런 커뮤니티 질문&답변

안녕하세요 백지수님 이정환입니다.

말씀해주신 현상은 버그라기보다는, 캐시를 강하게 가져가는 전략(예: staleTime: Infinity)에서 자연스럽게 발생하는 트레이드오프에 가깝습니다.

무한 스크롤 리스트의 경우 최신화를 자주 수행하면, 리페칭이 발생하면서 리스트가 초기화되거나, 심한 경우 이미 불러온 여러 페이지를 다시 불러오게 되어 성능과 UX가 오히려 나빠질 수 있습니다. 반대로 캐시를 유지하면 지금처럼 다른 사용자의 새 글이 즉시 반영되지는 않는 대신, 사용자가 보고 있던 리스트 상태를 안정적으로 유지할 수 있다는 장점이 있습니다. 강의에서는 인프라에 많은 비용을 투자하지 않는(Supabase 무료 버전 사용 등) 등의 이유로 최신성보다는 성능과 안정성에 조금 더 무게를 두는 방향으로 구현했습니다.

만약 이런 방식이 서비스 성격과 맞지 않는다고 느끼신다면, UX로 보완하는 방법도 충분히 가능합니다. 예를 들어 피드 상단이나 하단에 “새 게시글 불러오기” 버튼을 두어 사용자가 원할 때만 최신 데이터를 다시 불러오게 하거나, 캐시 전략을 조정해 특정 시점에만 invalidate/refetch가 일어나도록 설계하는 방식도 고려해볼 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. 백지수님께서 겪고 있는 문제는 주로 클라이언트 사이드 렌더링(CSR)에서 종종 발생하는 문제 중 하나입니다. 이는 상태 관리 및 데이터 페칭 전략과 관련이 있을 수 있습니다.

설명 및 해결 방법

1. 상태 관리:

   • 상태 관리 라이브러리를 사용하고 계신다면, 클라이언트 사이드에서 메인 리스트 화면으로 돌아올 때 상태가 갱신되지 않는 것이 문제일 수 있습니다.
     
   • React Query나 SWR 같은 라이브러리를 사용하시면 데이터의 캐싱 및 상태 갱신을 손쉽게 처리할 수 있습니다. 이를 통해 A 유저가 메인 리스트로 돌아올 때 자동으로 데이터를 다시 가져오게 설정할 수 있습니다.
     

2. 데이터 페칭 트리거:

   • 일반적으로 사용자가 페이지를 전환할 때마다 데이터를 다시 가져오도록 처리하는 것이 좋습니다. 페이지 이동 시 데이터를 갱신하거나 특정 시간이 경과하면 자동으로 데이터를 갱신하도록 설정할 수 있습니다.
     

유사 사례 및 해결 방법

• Zustand 상태 리셋 문제 해결 사례: Zustand를 활용하여 클라이언트 사이드에서 최신 상태를 반영하는 방법에 대해 논의합니다.

• React Query와 Zustand를 활용한 상태 관리: 상태 관리 및 데이터 페칭의 효율적인 접근 방식에 대해 설명하고 있습니다.

이 문제는 개발 중에 자주 나타날 수 있는 문제이며, 데이터 페칭 및 렌더링 전략을 조정하여 해결할 수 있습니다. 필요한 경우 추가적인 재질문도 환영합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.