React Query - keepPreviousData 옵션

리액트 쿼리를 이용해 서버에서 데이터를 받아와 화면에 뿌려주는 기능을 구현 중에

위와 같이 사용자가 드롭박스 메뉴에서 게시글 분류 방법을 선택해 선택한 방법에 해당하는 데이터를 서버에 요청해 데이터를 받아와 화면에 뿌려주는 기능이 있었습니다.

이때 처음 화면에 컴포넌트들이 마운트 되었을 때 다양한 분류 방법에 해당하는 데이터들을 캐싱하고 있지 않기 때문에 사용자가 드롭박스에서 분류 방법을 선택하면 쿼리키가 변경되어 서버에 새로운 데이터를 요청하는 동안 화면에 깜빡임이 발생하였습니다.

이 문제를 해결하기 위해서 찾아보던 중 아주 쉽게 해당 문제를 해결할 수 있었습니다.

바로 useQuery 3번째 인자에 전달하는 옵션에서 keepPrevious 옵션을 true로 작성해 주면 해결되는 것이었습니다.

keepPrevious 옵션은 개발자가 따로 설정하지 않으면 기본값은 false이며 이 옵션은 true이며 서버에 데이터를 요청하는 동안 이전 데이터를 화면에 보여주게 됩니다.

코드는 아래와 같이 작성하면 됩니다.

const {data} = useQuery(["쿼리 키"], 쿼리함수, { keepPrevious : true});

항상 이 옵션을 true로 설정하는 것보다 꼭 필요하다면 사용하는 것이 좋을 것 같다. 어떤 상황에서는 이전 데이터를 화면에 보여 줄 필요가 없기 때문입니다.