1. 서버 상태 (Server State)
외부 서버에서 제공하는 데이터나 리소스에 대한 상태를 의미합니다. 이 상태는 클라이언트 애플리케이션이 직접 관리하지 않고 서버로부터 받아오는 정보를 사용합니다.
ex) 데이터베이스 - 사용자 정보, API로 부터 받아오는 상품 목록
1-1 서버 상태의 특징
- 서버에 저장되므로 클라이언트가 종료되어도 데이터가 사라지지 않습니다.
- 보통 클라이언트에서 API 요청을 보내 데이터를 받아서 사용하며
- 권한이 있는 클라이언트라면 누구나 서버 상태 데이터에 접근할 수 있습니다.
- 네트워크 요청이 요구되므로 데이터에 접근하고 업데이트하는 데 시간이 걸릴 수 있습니다.
1-2 예시:
- API 데이터: /users 엔드포인트에서 받아온 사용자 리스트
- DB 값: 데이터베이스에서 읽어오는 재고 정보
- 외부 서비스: 날씨 정보 API나 지리 위치 서비스에서 받아오는 데이터
- 비동기 데이터
2. 클라이언트 상태 (Client State)
클라이언트 상태란 웹 브라우저나 앱의 메모리에 일시적으로 저장되는 상태값으로, 사용자의 행동과 관련된 데이터입니다.
2-1 클라이언트 상태의 특징:
- 일시적으로 저장되기 때문에 브라우저를 새로고침하거나 종료하면 저장된 데이터는 사라집니다.
- 클라이언트 내부에 저장되고 관리되기 때문에 해당 클라이언트만 데이터에 접근할 수 있습니다.
- 네트워크 요청을 할 필요 없이 데이터에 빠르게 접근할 수 있습니다.
- 그러나 초기 데이터를 받아오거나 데이터 업데이트가 요구되는 경우 네트워크 요청이 필요할 수 있습니다.
2-2 예시:
- UI 상태: 모달의 열림/닫힘 상태, 현재 선택된 탭
- 폼 데이터: 사용자가 입력한 폼의 값들
- 필터링 상태: 필터 옵션 선택에 따른 데이터 정렬/필터링 값
- useState로 관리되는 다양한 값들
비교하기
3. 상태 관리 라이브러리
상태 관리 라이브러리는 각각의 특징에 따라 주로 관리하는 상태가 다릅니다.
React Context API: 주로 클라이언트 상태를 관리하는 데 사용됩니다. 전역적인 UI 테마, 사용자 인증 정보 등 컴포넌트 트리 깊숙한 곳에서 필요한 상태를 전달하는 데 효과적입니다.
Redux: 주로 클라이언트 상태를 관리하기 위해 만들어졌습니다. 단방향 데이터 흐름을 강제하여 상태를 예측 가능하게 만들고, 복잡한 상태 로직을 효율적으로 관리할 수 있습니다.
Recoil: 클라이언트 상태를 관리하지만, React의 컴포넌트 기반 상태 관리와 유사한 방식으로 더 직관적이고 유연합니다. 작은 단위의 상태(atom)를 필요로 하는 컴포넌트만 업데이트하는 방식을 통해 성능 최적화에 유리합니다.
React Query / SWR: 이 라이브러리들은 서버 상태 관리에 특화되어 있습니다. 데이터 페칭, 캐싱, 동기화, 업데이트 등 서버 데이터와 관련된 복잡한 작업을 효율적으로 처리하도록 돕습니다.
4. 요약
서버 상태는 외부 서버에서 데이터를 가져와 관리하는 상태로, 네트워크 요청, 비동기 처리, 캐싱 등이 필요하며 데이터가 외부에서 변경될 가능성이 큽니다. 반면 클라이언트 상태는 애플리케이션 내에서 관리되는 상태로, UI 상호작용이나 로컬 상태 관리와 관련되어 있으며 즉각적이고 단기적인 특성을 갖습니다.
