1. PreFetching
🚫 문제 - 데이터를 미리 캐시해서 깜빡임을 줄이자
👉 code는 open sandBox를 확인하면 볼수있습니다.
💡 문제해결
prefetchQuery를 이용해서 데이터를 가져왔다.
또한 useEffect안에서 useQuery로 가져오는 데이터를 제외를 하여금 불필요한 데이터 캐싱을 방지했다.
마지막으로 데이터가 없을때에는 기본값을 fallback으로 초기화를 해놓았기때문에 type문제라던가 isLoadingd을 통해서 데이터를 보여줄때 좀더 수훨하게 보여줄수 있었다.
🚫 문제발생
페이지 이동 시 preFetching과 useQuery의 데이터 값이 달라서 생기는 문제
💡 문제해결
문제가 발생했을때 devtools를 통해서 데이터를 확인을 했고 해결방안이 보였다.
데이터를 for문으로 반복할때 i값을 넣어줘야 하는데 현재 page의cuurent값을 넣었기 떄문에 위와같은 문제가 발상했었고 devtools를 통해서 쉽게 확인하여 빠르게 수정할수 있었다.
🧐 느낀점
다시 봤을때에는 정말 쉬워보이지만 react-qeury를 처음 도입하는 과정은 순탄치 않았고
말그대로 처음으로 내가 진행을 하다보니까 어려움과 벽을 많이 부딪혔다. 하지만 해냈고
devTools의 편리함을 한번더 확인 할수 있었다.
다음으로는 filter기능과 mutation을 통한 데이터 변경을 통해
데이터를 좀더 깔끔하고 쉽고 사용성 좋은방법들을 더 찾아보도록 하자.
frontEnd Developer