1️⃣ 어쩌다 버그를 마주했는가
react-query를 이용하여 태그를 클릭하거나, 검색을 통해 검색결과를 얻어오는 기능을 구현하던 와중에 검색한 결과는 예상한대로 잘 렌더링이되는데 태그를 선택하였을 때는 화면에 아무일도 일어나지 않는 버그가 발생하였다.
🔥 버그 상황 코드 혹은 스크린샷
📑 버그 상황 설명
위 사진을 보면 예상되는 결과로는 원래는 “서버” 태그를 클릭시 “서버” 태그가 들어있는 꾸러미리스트들만 보여주어야하는데 그렇지 않았고 실제 결과는 아예 랜더링 자체가 되지않았다.
2️⃣ 🐛버그를 일으키는 코드 혹은 원인은 무엇인가
버그를 일으키는 원인은 tag를 클릭할 때 마다 tagId를 저장하는 변수가 있는데 이 변수 또한 queryKey에 넣어줘야한다는 것이었다. 밑에는 버그가 발생하였을 때의 내 코드다. 나는 오직 queryKey에 검색어에 들어가는 keyword만 넣었기 때문에 여러개의 태그를 아무리 선택해도 아무 것도 선택하지 않은 것과 같은 결과를 초래하는 즉, 렌더링이 되지않는 버그가 발생하였다.
3️⃣ 💦어떤 시도를 해보았나
- “서버” 태그의 값이 들어오지 않거나 이상한 값으로 들어오는건가? 생각하여
console.log를 찍어보니 또 값이 잘들어있어서 더 미궁 속이였다..
ReactQueryDevtools를 설치하여서 시각화하여 눈으로 직접 데이터를 확인하였습니다. (요 방법을 통해서 원인을 정확하게 파악할수있었다.)
4️⃣ 💼최종 해결 방법
queryKey에 tagsId를 추가하였다.
요렇게 하니까 첫번째 사진인 기존의 렌더링 화면에서는 [”search”, “”, []]]에서 두번째 사진인 태그필터에서 “서버” 태그를 선택하니 [”search”, “”, [3]]]으로 바뀌면서 화면 또한 렌더링이 되었다.
즉, 리액트 쿼리에서는 쿼리키를 기반으로 쿼리 캐싱을 관리한다는것을 알게 되었다.
쿼리 캐싱이란 쿼리의 결과를 메모리에 저장하고 재사용하여 성능을 최적화하는 것이다.
이를 통해 동일한 쿼리를 여러 번 수행할 때마다 매번 서버를 요청하지 않고 이미 가져온 데이터를 사용해 응답 시간을 줄일 수 있다. 그렇기 때문에 버그가 발생한 것은 동일한 쿼리 키였기 때문에 동일한 응답이므로 렌더링 되지않았다. 즉, 동적으로 쿼리 키를 지정하면 다양한 요청을 처리하여 내가 원하는 내용이나 목적에 따라 다양한 결과를 얻을 수 있다. 한 줄로 요약하면 동적 쿼리 키를 사용하면 API 요청을 더 유연하게 만들고 코드를 더 재사용 가능하도록 설계할 수 있다.