1. React Query ?

서버 상태관리를 하는 라이브러입니다.

React Query는 API 호출과 같은 비동기 작업을 수행하고, 서버에서 가져온 데이터를 캐시하며, 이 캐시된 데이터를 활용하여 애플리케이션의 성능을 향상시킵니다. 또한, 데이터의 상태를 관리하고, 데이터를 자동으로 업데이트하거나, 데이터를 동기화하는 기능도 제공합니다.

React Query를 사용하면 애플리케이션의 상태 관리를 좀 더 효율적으로 할 수 있으며, 코드를 단순화할 수 있습니다. 따라서 개발자는 비즈니스 로직에 더 집중할 수 있습니다.

2. Client State vs Server state

Client State

브라우저 또는 클라이언트 측 어플리케이션 내에서 관리되는 상태를 말합니다. 예를 들어, 사용자가 폼에 입력하는 값, 체크박스의 상태, UI의 상태(드롭다운 메뉴가 열려 있는지 등) 등이 클라이언트 상태에 해당합니다. 이러한 상태는 직접적으로 사용자의 인터랙션에 의해 변경되며, 일반적으로는 서버에 저장되거나 동기화되지 않습니다.

Server State

서버에서 관리되고, 클라이언트와 서버 간에 동기화되는 상태를 말합니다. 예를 들어, 사용자의 프로필 정보, 게시물 데이터, 사용자의 팔로잉 목록 등이 서버 상태에 해당합니다. 이러한 상태는 호출을 통해 가져오거나 변경되며, 서버에서 관리되기 때문에 여러 클라이언트에 동기화될 수 있습니다.

두 가지 상태 모두 애플리케이션에서 중요한 역할을 하지만, 사용 방식과 관리 방법은 매우 다릅니다. 클라이언트 상태는 주로 UI 상태를 관리하며, 서버 상태는 주로 사용자 데이터와 관련된 비즈니스 로직을 관리합니다. 따라서 애플리케이션의 요구 사항에 따라 적절한 상태 관리 전략을 선택해야 합니다.

3. React Query에서 제공하는 기능

1 ) 서버 관리 상태 제공

React Query는 애플리케이션의 서버 상태를 관리하는 도구입니다. 이는 서버에서 가져온 데이터를 캐시하고, 이 캐시된 데이터를 효율적으로 업데이트하고 동기화함으로써 이루어집니다. 이렇게 함으로써 애플리케이션은 항상 최신의 서버 상태를 반영하게 되며, 이를 위한 복잡한 로직을 직접 관리할 필요가 없게 됩니다.

2 ) Prefetching

Prefetching은 사용자가 특정 데이터를 요청하기 전에 미리 데이터를 가져오는 기능입니다. 예를 들어, 사용자가 리스트 항목을 클릭하여 상세 페이지로 이동하는 경우, 상세 페이지의 데이터를 미리 가져와 빠르게 보여줄 수 있습니다. 이는 사용자 경험을 향상시키는 데 크게 기여합니다.