안녕하세요 오늘은 서버 상태데이터를 관리할 수 있는 리액트 쿼리에 대해 알아보겠습니다!╰(°▽°)╯╰(°▽°)╯

---

우선 리액트 쿼리가 뭐고 왜 배울까요?

리액트 쿼리란?

서버 상태데이터를 관리해주는 라이브러리입니다.

왜 배울까요?

리액트 쿼리가 없었을때는 서버의 데이터를 어디에 저장했을까요?
대부분은 리덕스에서 클라이언트 데이터와 서버 데이터를 같이 관리했습니다.
여기에 문제점이 있었습니다.
리덕스에서 프론트와 백의 데이터를 같이 관리하면 프로젝트가 커졌을떄 폴더가 혼동되고 굉장히 비대해집니다.또한 백의 데이터가 상대적으로 무겁기떄문에 요청이 많다면 성능 저하가 온다는 문제점을 가지고 있습니다.

이 문제점들을 해결하기 위해 리액트 쿼리가 나왔습니다.
리액트 쿼리는 서버의 상태데이터를 관리해줍니다 그렇기떄문에
리액트 쿼리는 서버의 데이터(비동기 통신)를 관리하고 리덕스는 프론트의 데이터만 관리해서 영역을 나눠주었습니다.

또한 리액트 쿼리는 응답한 서버데이터를 웹 브라우저의 캐시에 저장을 합니다.
조건(staleTime,cashTime)에 만족한다면 다시 요청을 보내지않고 캐시에 있는 데이터를 재사용해 성능면에서도 우수합니다.

staleTime: fresh상태에서 stale상태로 변하는 시간
cashTime : cash의 만료기간
캐시란?
웹브라우저에 저장하는 작은 데이터입니다.
캐시의 사용 목적은 클라이언트에서 요청을 할떄 만약 캐시에 그에 맞는 데이터가 있다면 요청을 하지않고 캐시의 데이터를 사용합니다.
결론: 네트워크 요청을 적게 해서 메모리를 절약할 수 있습니다.
더 자세한 내용은 추후에 포스팅하겠습니다!

리액트 쿼리의 대표적인 기능

• Loading / Error states

로딩상태와 오류상태를 감지할 수 있습니다.

• Pagination / infinite scroll

페이지 매김 또는 무한 스크롤이 필요한 경우 부분적으로 가져올 수 있습니다.

• Prefetching

미리 데이터를 fetching해 올 수 있습니다.

• Mutations

업데이트를 관리할 수 있습니다.

• De-duplication of requests

중복 요청을 제거할 수 있습니다.

• Retry on error

에러가 생긴다면 재요청을 보내줄 수 있습니다.

• Callback

대기, 성공 , 오류를 구별해서 각각의 요청사항을 전달해줄 수 있습니다.

---

마치며

리액트 쿼리가 무엇인지 왜 배우는지 알아보았습니다.
다음 포스팅부터 본격적으로 리액트쿼리를 어떻게 사용하는지
프론트에서 서버에 요청시 데이터는 어떤식으로 전달되는지 자세히 알아보겠습니다!
╰(°▽°)╯
참고자료 및 이미지 출처: https://www.udemy.com/course/react-query-react/