서문

모던 웹 프론트엔드를 개발함에 있어 UI/UX의 중요성과 함께 프로덕트의 규모가 커졌고, FE에서 수행하는 역할이 늘어났으며 관리하는 상태 역시 많아졌다.

=> 상태관리의 필요성 대두

• 상태?
  - 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있다. 즉 문자열, 배열, 객체 등의 형태로 응용프로그램에 저장된 데이터 => 개발자 입장에서 관리해야 하는 데이터들

상태관리란?

상태를 관리하는 방법에 대한 것이다. 이는 프로덕트가 커짐에 따라 어려움도 커진다.

React에선 단방향 바인딩이므로 Props Drilling이 존재한다. 하여 Redux나 Mobx와 같은 라이브러리의 힘을 빌린다.

Client State vs Server State

state는 크게 client state와 server state로 나눈다.

• Client state
  - client상에서 초기화하고 관리하는 state
  - 특정 유저만을 위한 state이며, 다른 유저와 공유하지 않는다.
  - Client 내에서 UI/UX 흐름이나 사용자 인터랙션에 따라 변할 수 있다
• Server State
  - client가 아닌 server와 같이 원격의 공간에서 관리되고 유지되는 state
  - 서버에 저장된 데이터지만 클라이언트에서 보여주기 위한 데이터
  - 다른 사람들과 공유되는 state로 데이터가 다른 유저들에 의해 수시로 변할 수 있다.
  

React Query?

react에서 server state를 전문적으로 관리해주는 라이브러리다.

How to manage server state

• client가 server로부터 데이터를 요청할 때, fetch와 axios를 통해 server와 직접 소통하는 것 대신 server 데이터의 react-query 캐시를 요구한다.
• 즉 client와 server는 직접 소통하지 않고 중간에 있는 react-query와 소통한다.
• react-query는 서버 데이터의 캐시를 클라이언트에서 유지시켜준다.
• 그 서버 데이터의 캐시는 사용자의 설정에 기반하여 유지된다.
  즉 react query는 나의 입맛대로 server 데이터를 관리해준다.

plus..

• Loading / Error state가 존재하기 때문에 따로 설정할 필요 없다
• pagination / infinite scroll 가능
• prefetch 가능 => 유저가 필요한 데이터를 예측해서 페치 가능하다. 때문에 매우 빠르게 데이터를 확인할 수 있다.
• server data를 mutations or updates 할 수 있다.
• key로 queries를 구분하기 때문에, react-query는 request를 관리할 수 있다.
  즉 같은 요구가 올 때, react query는 한 번만 query를 보낼 수 있다.
• retry 가능 => error 발생시 retry도 관리가능하다
• callback을 제공해주기 때문에 성공시 또는 실패시 동작하는 action을 설정할 수 있다.

이와 같이 다양한 기능을 갖추고 있는 react-query 라이브러리를 본격적으로 공부하고 기록하고자 한다.

공부 방법

공식문서
udemy 강의