React-Query

웹사이트에서 사용하는 상태 데이터는 크게 클라이언트 상태 데이터와 서버 상태 데이터로 나눌 수 있다. 클라이언트 상태 데이터는 웹사이트의 어떤 메뉴가 열렸는지 닫혔는지, 혹은 사용자가 어떤 버튼을 눌렀는지 아닌지와 같은 UI 상태 값이나, 유저가 입력 폼에 입력한 데이터 등 서버와는 상관없이 웹 브라우저 안에서만 사용하는 데이터. 서버 상태 데이터는 서...

먼저, 쿼리란? '문의하다', '질문하다' 라는 뜻을 가진 단어. 데이터베이스에 필요한 데이터를 요청하는 것. useQuery()는 필요한 데이터를 백엔드에 요청해서 받아오는 React Hook이다. useQuery() 백엔드에서 데이터를 받아 올 함수 생성 useQuery()를 import 후 실행 useQuery() 리턴 값 useQuery 훅...

리액트 쿼리에는 두 가지 status가 있다. query status와 fetch status. query status는 실제로 받아 온 data 값이 있는지 없는지를 나타내는 상태 값. fetch status는 queryFn() 함수가 현재 실행되는 중인지 아닌지를 나타낸다. Query Status query status는 세 가지 상태 값을 가진다....

캐시(cache) 유저가 방금 전에 확인한 데이터를 또 보고, 또 보는 경우에도 매번 똑같은 데이터를 백엔드에서 받아온다.. 유저가 자주 보는 데이터를 어딘가에 저장해 두었다가 백엔드에 요청할 필요 없이 바로 보여줄 수 있다. 이럴 때 캐시라는 것을 사용한다. 캐시(Cache) 캐시란 데이터를 미리 복사해 놓는 임시 장소이다. 저장 공간의 크기는 작지...

데이터베이스에 새로운 값을 추가하거나 수정, 삭제하는 행위는 사이드 이펙트에 해당한다. 그리고 이렇게 사이드 이펙트가 발생하는 경우에 useMutation()이라는 훅을 사용한다. useMutation()은 useQuery()와 차이점이 있다. useQuery()의 쿼리 함수는 컴포넌트가 마운트되면서 자동으로 실행되지만, useMutation()은 실제로...

Dependant Query 두 쿼리가 의존관계에 있어 특정 순서대로 실행되어야 하는 경우에는 어떻게 해야 할까? 예를 들어, 첫 번째 쿼리는 유저의 정보를 받아 오고, 두번째 쿼리는 받아온 유저의 정보에서 아이디를 이용해 해당 유저의 프로젝트를 받아 온다. 이런 상황에서는 useQuery()의 enabled옵션을 사용한다. enabled값이 true가 ...