[Weekly Paper] 서버 상태와 클라이언트 상태의 차이

1️⃣ React Query가 만들어진 이유와 이점

React Query는 서버 상태 관리의 복잡성을 줄이기 위해 만들어졌습니다. React의 기본 상태 관리 방식은 클라이언트 상태를 관리하는데 적합하지만, 서버 상태를 관리할때 아래의 문제들이 발생합니다.

 

데이터 동기화 문제

서버 데이터와 UI 간의 동기화를 수동으로 처리해야 합니다.

 

캐싱과 갱신 문제

서버에서 가져온 데이터를 효율적으로 캐싱하고 필요한 경우 새로 고쳐야 합니다.

 

로딩, 오류 상태 관리의 복잡성

데이터 fetching과 관련된 로딩 및 에러 상태를 따로 관리해야 합니다.

 

의존성 관리

여러 쿼리가 서로 의존성을 가지는 경우, 이들의 데이터 흐름을 관리하기 어렵습니다.

---

 

React Query는 위 문제들을 해결하기 위해 설계된 라이브러리로, 서버 상태 관리에 특화된 도구를 제공합니다.

 

자동 데이터 캐싱

React Query는 서버에서 가져온 데이터를 자동으로 캐싱하고, 동일한 데이터를 다시 요청할 때 재사용합니다.

 

자동 데이터 갱신

데이터가 변경될 가능성이 있는 경우, 자동으로 데이터를 새로 고칩니다.

 

로딩 및 에러 상태 관리

isLoading, isError와 같은 상태를 기본적으로 제공하여 로딩, 에러 상태를 쉽게 처리할 수 있습니다.

 

의존성 관리 및 쿼리 병렬 처리

여러 쿼리를 병렬로 처리하거나, 의존 관계를 설정하여 효율적인 데이터 fetching이 가능합니다.

 

미리 가져오기

사용자가 접근할 가능성이 있는 데이터를 미리 가져와 UX를 향상시킬 수 있습니다.

---

2️⃣ 서버 상태와 클라이언트 상태의 차이

서버 상태(Server State)

• 서버 상태는 외부 데이터 소스에서 관리됩니다.
• 데이터를 서버에서 가져와 클라이언트에 저장하며, 종종 캐싱 및 동기화가 필요합니다.

클라이언트 상태(Client State)

• 클라이언트 상태는 사용자 인터페이스와 직접적으로 관련된 데이터로, 애플리케이션 내에서만 관리됩니다.
• 예: 모달 열림 상태, 입력 폼 데이터, UI 테마 설정 등.

주요 차이

특성	서버 상태	클라이언트 상태
데이터 출처	서버(API, 데이터베이스)	클라이언트(브라우저, 앱 내부)
관리 위치	서버와 클라이언트 간 협력	클라이언트 내부
변경 방식	서버에 요청을 보내 데이터를 변경	로컬에서 직접 데이터 변경
동기화 필요 여부	필요 (클라이언트 <->서버 동기화 필요)	불필요