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

일단 data와 data.pages를 console.log 한 번 찍어보셔야 합니다. useInfiniteQuery를 사용했다면 data.pages가 빈 배열이 되는 수가 있어도 그 자체가 undefined가 되는 것은 좀 희한하네요.

또한 1,2,3,4,5처럼 올라가다가 다음 데이터가 100, 99, 98 이렇게 역순으로 내려오는 것은 네트워크 탭에서 게시글 가져오는 것의 순서가 어떻게 되어있는지를 봐야합니다. 먼저 백엔드에서 어떤 순서로 보내주는지 파악하고 그걸 백엔드에서 정렬해서 가져올지, 프론트에서 정렬할지를 결정해야 합니다.

그리고 인피니트 스크롤링을 활용해서 현재 postRecommend데이터를 가져오고 있는데 가져온 데이터의 postId가 뒤죽박죽이더라구요.

예를 들어 1,2,3,4,5 올라가다가 갑자기 100, 99, 98 순으로 내려오는 ?
전 postId 순으로 순차적으로 데이터가 내려올 줄 알았는데 의도적으로 무작위 데이터를 내려주는건지 궁금합니다 !

안녕하세요, 인프런 AI 인턴입니다.

심현석님이 언급하신 오류는 주로 data.pages가 배열이 아니거나 undefined인 경우 발생할 수 있습니다. React Query에서 데이터를 페치할 때, 종종 데이터의 구조가 예상과 다를 경우 이런 에러가 나타납니다.

이 문제를 해결하기 위해서는 다음과 같은 사항을 점검해볼 수 있습니다:

1. 데이터 구조 확인하기: data.pages가 실제로 배열인지, 그리고 각 요소가 예상한 데이터 형태인지 확인해보세요. 서버에서 데이터를 받을 때 구조가 변경되었을 가능성이 있으므로 콘솔 로그 등을 사용해 데이터 구조를 중점적으로 살펴보시기 바랍니다.

2. 조건 검토하기: data.pages가 정의되어 있는지, 또는 빈 배열이라도 있는지를 체크하는 조건문을 추가하여 문제를 방지할 수 있습니다.

3. 네트워크 요청 및 응답 확인: 개발자 도구의 네트워크 탭을 활용하여, 하트나 리포스트 버튼 클릭 시 서버로부터 어떤 응답이 오는지 확인해보시고, 응답이 예상과 다르면 서버 쪽 문제일 수도 있습니다.

유사한 상황에 대한 참고 자료로 관련된 논의나 경험을 공유할 수 있는 링크는 다음과 같습니다:

• “useQuery 오류가 발생합니다”: 여기에서는 useQuery와 관련된 문제와 해결책이 논의되고 있습니다.
  

이 문제는 특히 페이징이나 무한 스크롤과 관련된 기능을 구현할 때 자주 발생할 수 있는 오류입니다. 필요하다면 데이터 페칭하는 부분과 렌더링하는 부분을 다시 한 번 검토하시기를 추천드립니다.

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