서버 상태 💞 클라이언트 상태

 

React Query는 주로 서버 상태를 효율적으로 관리하기 위해 설계되었다. 이전에는 서버 상태를 클라이언트 상태와 함께 관리하면서 발생하는 복잡성을 줄이는 것이 어려웠다.
-> 코드의 양이 늘어나고, 데이터 동기화와 캐싱 문제 등으로 어려움을 겪었다.

React Query는 이러한 문제를 해결해 주며, 서버 상태를 효과적으로 관리하고, 비동기 데이터 페칭, 캐싱, 자동 리패칭 등의 기능을 통해 개발자가 좀 더 쉽게 서버 상태를 다룰 수 있도록 한다.

 

[🔥React 뽀개기] - React Query 왜 씀?

React Query 왜 씀?

 

✨서버 상태(Server State)

• 외부 서버에서 관리되는 데이터
• 이 데이터는 API를 통해 클라이언트가 요청하고, 서버에서 응답하는 형식으로 전달된다.

1. 서버 상태는 비동기적으로 변경되며, 데이터가 언제 업데이트될지 예측할 수 없다. 예를 들어, 사용자가 서버에 데이터를 추가하거나 수정하는 경우, 그 결과가 클라이언트에 반영되기까지 시간이 걸린다. (비동기)
2. 여러 클라이언트에서 공유될 수 있으며, 동일한 데이터를 여러 사용자가 동시에 접근하고 수정할 수 있다.
3. 캐싱, 동기화 및 리패칭과 같은 기능을 통해 효율적으로 관리해야 한다.

✨클라이언트 상태(Client State)

• 애플리케이션의 사용자 인터페이스(UI)와 관련된 데이터
• 이 데이터는 사용자의 상호작용에 따라 변경되며, 애플리케이션 내에서 직접 관리된다.

1. 클라이언트 상태는 사용자가 직접 조작하거나, UI 요소와 연계되어 즉각적으로 반영된다. 예를 들어, 사용자가 버튼을 클릭하면 UI 상태가 즉시 변경된다. (동기)
2. 특정 컴포넌트에 국한되거나, 특정 화면에서만 사용된다. 따라서, 서버 상태와는 달리 여러 컴포넌트 간에 공유되기 어려운 경우가 많다.
3. 주로 단순한 데이터 구조로 이루어지며, 상태 관리가 비교적 간단하다.

	서버 상태 (Server State)	클라이언트 상태 (Client State)
정의	외부 서버에서 관리되는 데이터	애플리케이션의 UI와 관련된 데이터
비동기성	비동기적으로 변경되며, 서버와 통신 필요	즉각적으로 변경되며, 사용자의 조작에 따라 반영
데이터 공유	여러 클라이언트가 동일한 데이터 공유 가능	특정 컴포넌트나 화면에서만 사용
일관성	데이터의 일관성 유지가 중요	일관성 유지가 상대적으로 쉬움
캐싱	캐싱 및 자동 리패칭 필요	상태 관리가 비교적 간단
관리 방법	API 요청을 통해 데이터 관리	컴포넌트 내에서 직접 관리
예시	사용자 정보, 게시물 데이터 등	모달 상태, 입력 폼 상태 등

참고

• https://soobing.github.io/react/How-to-manage-server-state-with-React-Query/
• https://webmobtech.com/blog/explore-and-understand-about-react-query/