[Next.js] 최종 팀프로젝트 - (11) 챌린지 첫 페이지에 오답노트 버튼 연결하기

안셩·2024년 11월 9일
0

프로젝트

목록 보기
30/36
post-thumbnail

📌 챌린지 첫 화면 슬라이더에 오답노트 버튼 추가하기

기존에 다른 팀원이 슬라이더에 문제 생성하는 기능을 넣어두셨다. 여기에 내 기능을 추가하면 됐다.
src>app>(mobile)>challenge>page.tsx


☄️ 트러블슈팅

1. 문제점

문제를 다 풀고 챌린지 결과 페이지에서 오답노트 페이지로 가면 추가된 틀린 문제 리스트에 반영되지 않고, 새로고침을 해야 리스트에 뜸.

2. 원인 추론

기본값으로 staleTime을 설정하지 않았을 때 기본값 0으로 설정되어 있지만, 명시적으로 설정하지 않았으므로 TanStack Query는 적절한 시점에 자동으로 데이터를 리페치(재요청)하도록 설계되어 있다. 이 경우, 컴포넌트가 다시 마운트되거나, 사용자가 앱을 재방문할 때까지 데이터를 새로 가져오지 않을 수 있기 때문에 데이터가 바로 반영되지 않을 수 있다.

3. 해결 방안

staleTime: 0으로 명시적으로 설정하면, 해당 쿼리는 캐시된 데이터를 항상 낡은(stale) 데이터로 간주하게 된다.
즉, 어떤 상황에서도 데이터를 최신 상태로 유지하기 위해 언제나 리페치가 발생된다. 따라서 새로고침 없이도 변경된 데이터를 바로 반영할 수 있다.

4. 결과


참고 링크 : useQuery | TanStack Query React Docs

profile
24.07.15 프론트엔드 개발 첫 걸음

0개의 댓글