서버상태 관리란?
- 웹프레임워크가 탄생한 배경은 웹에서도 어플리케이션과 같은 기능을 구현하고자 했기 때문이다. (여기서 어플리케이션이란, 브라우저 내에서 화면 변경을 편하게하고자 했다.)
- 서버통신을 제외하고 클라이언트 단에서 무엇인가 구동되게하는 것이 프레임워크의 기능이였다.
서버통신은 웹개발에서 제일 중요하다.
- 어쨋든 웹의 본질은 문서의 공유이다, 문서를 한 곳에 보관하는 서버를 만들고 이를 볼 수 있는 브라우저를 통해서 데이터가 연결되는 그물망을 만드는것이 본질이다.
- ####### 웹개발이란 서버에서 데이털르 내려받고 클라이언트에서 데이터를 보내 교환하는 것이 당연한 것이다.
현대 웹개발에서는 서버상태와 비동기 로직이 제일 어렵다.
- 데이터를 처리하는 기기가 다른 경우 (서버사용)는 보관과 정송과정에서 대기시간이 발생하는것은 당연하다.
- 그 결과 우리는 데이터를 처리하는데 즉각적으로(동기적)으로 처리 하지 못하고 일정시간이 필요한 비동기 방식으로 해야한다.
해결하려면?
- 지속적으로 동기화를 해야한다.
- 로딩 전,중,후의 시점과 상태에 대한 관리가 필요하다.
- 불필요한 동기화는 최소화 하며 최신화를 해야한다.
react-query 란?
클라이언트와 서버사이에 통신을 원할하게 해결해주는 도구인 것이다.
- 비슷한 것들로 SWR,redus Query등이 있다.
- query와 mutation의 분리
- 동기화와 최신화
- 서버 데이터상태 관리, 로딩상태관리, 에러상태관리
- 효율적인 네트워크 사용전략 제공 - 데이터 캐싱, 재사용,오프라인 처리, 스마트 리프레시 등
query 란?
- 데이터를 읽어오는것을 의미한다.
- 쿼리 키와, staleTime : 요청 키와 보관시간을 지정해 아직 신선한 데이터에 대해서는 재요청을 하지 않는다.
- 병력과 직렬 쿼리 : 요청간 의존이 없다면 병렬로 요청하여 응답시간을 개선, 의존된 쿼리들은 직렬로 요청
- 주기별, 포커스별 자동 업데이트 : 일정 시간이 지나거나, 다른 작업을 하다가 다시 접근할 경우 다시 요청하여 데이터를 최신화
- 무한스크롤 및 페이지네이션 지원
- 쿼리요청취소 : 서버에 요청한 데이터가 필요가 없어진 경우, 해당 요청 이후의 작업을 무시할 수 있도록 지원
- 오프라인 캐싱 : 서버의 내용을 브라우저의 스토리지에 보관하고 이 데이터를 먼저 노출하게 한다.
Mutation 이란?
- key를 통한 스마트 리프레시 : 수정 요청이 완료되면 관련 데이터를 한번에 업데이트 요청
- 낙관적인 업데이트 지원 : 시간을 줄이고자 브라우저에서 먼저 화면에 반영하고 서버에 데이터를 업데이트치는데 실패하면 원래대로 복구하는 기능 지원
- 트랜잭션과 롤백 : 여러가지 동시 변경사항을 한번에 요청하여 충돌을 방지, 하나라도 실패하면 롤백 기능 제공
캐시와 state
- 서버 데이터는 방대하나 클랑이언트 데이터는 그럴수 없다. 또한 모든 데이터를 클라이언트와 1:1 동기화 할 수 없다.
- api를 통해 가져온 데이터는 클라이언트에 맞게 재조정되어 보관하며 이를 캐싱이라고한다.
- 캐싱된 데이터는 상황에 맞게 재사용하며 클아이언트 프로그램에서 상태로 활용된다.
