TIL 65 | React Query

🤞React Query

React Query는 React Application에서 서버 상태를 가져오고, 캐싱하고, 동기화하고 업데이트 하는 작업을 한다.

Motivation

• 기본적으로는 React Application에서는 서버로 부터 데이터를 가져오거나 업데이트 하는 방법을 제공하지 않는다.
• 그러므로 자체적으로 이 방법을 구축하기 위해서 react hooks를 사용하여 state 및 effect를 조합하거나 글로벌 상태 머신을 사용하여 React Application 전체의 비동기 처리를 다룬다.
• 대부분의 전통적인 상태 관리 라이브러리는 비동기처리나 서버 상태 작업 보다는 클라이언트 상태 관리 적합한데 여기서 서버 상태란 아래의 특징을 갖는다.

1. 사용자가 제어하지 못하는 위치에서 원격으로 유지한다.
2. 비동기 API를 통해 서버 상태를 가져오거나 업데이트 한다.
3. 소유권이 다른 사람과 공유 된다.
4. 주의하지 않으면 Application에서 잠재적으로 out-of-date 상태가 될 수 있다.

• 클라이언트에서 서버 상태를 처리할 때 다양한 문제를 마주하게 됩니다.

1. 캐싱(Caching)
2. 백그라운드에서 out-of-date 된 데이터를 갱신해야 할 때
3. 데이터가 out-of-date 될 때를 파악해야 할 때
4. 가능한 빠르게 데이터 업데이트를 반영해야 할 때
5. 페이징이나 지연 로딩(Lazy Loading) 데이터를 최적화해야 할 때
6. 메모리 가비지 컬렉션을 운영해야 할 때
7. 쿼리 결과를 메모이제이션(Memoization)