개발자

리액트쿼리 고수분들 도와주세요

1월 8일조회 90

사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다. const { data, isLoading, fetchNextPage } = useInfiniteQuery( ["getProducts", sortOption, sortOrder, filterValue, categoryName], async ({ pageParam = page - 1 }) => { const response = await api.post(`/cal/v1/product/${categoryName}`, { filter: filterValue, page: pageParam, query: "", size: size, => size: size - 8 /* 변경한 부분 */ sort: [{ field: sortOption, option: sortOrder }], }); setTotalProduct(response.data.body.product.totalCount); return response.data.body.product.items; }, { refetchOnWindowFocus: false, getNextPageParam: () => page, } ); 위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다. 상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 요청시간이 비정상적으로 커집니다. 사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데 렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다. **초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다** 코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 왜 이런 문제가 발생하는지 궁금합니다. 이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 알려주시면 감사하겠습니다!!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

노우준님의 프로필 사진

안녕하세요 캐싱된 데이터는 빠르게 렌더링된다면, 서버에서 데이터를 요청할 때 지연이 발생한다는 것인데, 이는 네트워크 문제 혹은 API 백엔드 문제일 것이라고 생각합니다. 서버에서 비효율적인 쿼리를 사용중이거나, 데이터베이스와의 네트워크 연결 상태가 느리거나 등 여러 원인을 살펴봐야 할 것 같아요

김태영님의 프로필 사진

김태영

작성자

제로베이스 프론트엔드스쿨 소프트웨어개발과1월 8일

답변 감사합니다! 현재 백엔드 로그를 보기가 힘든상황인데, 프론트단에서 알아보거나 조치할것은 더이상 없을까요?

노우준님의 프로필 사진

노우준

연세대학교 응용통계학과, 컴퓨터과학과1월 8일

보여주신 코드만 봤을 때는 상품목록을 불러올 때 서용하는 query parameter들을 전부 서버로 보내주는 방식이라 프론트 단에서는 payload에 담긴 parameter 중에 잘못된 것이 없는지 확인하는 것 말고는 크게 검토할 만한 부분이 제게는 보이지 않네요 ㅠㅠ

김태영님의 프로필 사진

김태영

작성자

제로베이스 프론트엔드스쿨 소프트웨어개발과1월 8일

정렬과 필터를 위한 parameter들 이라 렌더링에 영향을 주는 것들은 아닐거에요ㅠㅠ 답변 감사드립니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!