4.React-query를 활용하여 동기화 및 불필요한 요청 개선

기존의 문제

기존에는 데이터를 useEffect를 이용해서 데이터를 비동기적으로 불러왔습니다.

그렇기에 데이터에 대한 (로딩중, 로딩완료) 상태를 나타내는 상태들과 새로운 데이터를 추가했을때 다시 useEffect가 실행되어 새로운 데이터를 반영할 수 있도록 데이터업데이트를 알려주는 상태까지 데이터를 불러오는 과정 속에서 많은 상태들을 관리해야 헸습니다.

또한 다른 페이지로 이동했다가 다시 기존에 페이지로 돌아오면 다시 컴포넌트가 마운트 되어 같은 데이터를 보여주는 상황에도 불구하고 또 서버에 데이터 요청을 보내어 아주 비효율적으로 동작하였습니다.

개선 방법

상태관리 라이브러리인 React-Query의 useQuery와 useMutation 기능을 사용하여 이번 문제를 개선하였습니다.

React-query는 서버상태관리 라이브러리로써 staleTime을 설정하여 데이터를 캐싱해 동일한 정보를 요청하는 경우에는 서버에 요청을 보내지 않고 캐싱된 데이터를 사용하여 불필요한 api요청을 하지 않을 수 있었습니다.

또한 useQuery가 제공해주는 데이터의 상태를 나타내주는 값을 통해 굳이 데이터 stattus의 상태값을 만들어서 관리할 필요도 없어졌습니다.

useMutation을 통해 기존의 쿼리들을 무효화 시키므로써 더욱 손쉽게 데이터를 동기화 시키고 화면에 업데이트 된 정보들이 잘 반영되도록 만들수 있었습니다.