React Query

· React Query
1. 들어가기 Form은 회원가입, 개인정보수정 등 데이터를 업데이트해야 하는 상황에서 자주 쓰인다. 데이터를 가져오는 것(Query), 수정하는 것(Mutation)를 편하게 하기 위해 React Query를 사용한다면, Form과의 통합은 피할 수 없다. 데이터를 변경하고 싶을 때 서버 상태와 클라이언트 상태의 경계가 약간 모호해지기 시작하고, 여기서 복잡하다고 느낄 수 있다. 2. 서버 상태와 클라이언트 상태 비교 서버 상태는 클라이언트가 소유하지 않은 상태로, 비동기 스냅샷 데이터이다. 여기서 비동기는 서버와 통신을 해야 한다는 의미이고, 스냅샷은 서버로부터 응답을 받은 그 시점의 데이터를 의미한다. 클라이언트 상태는 프론트엔드가 모든 권한을 가지고 있고, 동기 정확 데이터이다. useState를..
· React Query
React Query가 없던 시절 리덕스를 사용할때는 서버에서 데이터를 가져온뒤 리덕스에 보관해서 전역상태로 보관했다.1. Server State란그래서 서버 상태를 다른 클라이언트 상태와 똑같이 취급했다.하지만 서버 상태(사용자 정보, 글 목록 등)의 경우 클라이언트가 소유하지 않는 정보이다.유저에게 가장 최신 버전을 화면에 표시하기 위해 서버에서 빌려온 것일 뿐이다. (데이터를 소유하는 것은 서버임)2. 기본값 설명먼저 React Query는 기본 staleTime이 0인 경우에도 매번 리렌더링할때 queryFn을 호출하지 않는다.staleTimequery(데이터)를 fresh하게 놔둘 시간(fresh -> stale 시간), 기본값 0staleTime 내에 다시 query 요청 시 fetch하지 않..
yoxxin
'React Query' 태그의 글 목록