서버 상태와 클라이언트 상태는 어떻게 구분하나요?

서버 상태는 서버가 원천 소유권을 가진 비동기 데이터로 캐싱, 동기화, 재검증, 로딩·에러 처리가 중요합니다. 클라이언트 상태는 모달 열림, 입력 중인 값, 선택된 탭처럼 UI 내부 상호작용을 표현하는 상태입니다.

핵심 개념

핵심 기준은 데이터의 소유권과 동기화 필요성입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

소유권이 서버에 있는 데이터인지, UI 안에서만 의미가 있는 상태인지 나눠보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

사용자 프로필 조회 결과는 서버 상태이고, 프로필 편집 모달이 열렸는지는 클라이언트 상태입니다.

실무에서 적용하는 방법

서버 상태는 TanStack Query, SWR 같은 도구를 검토하고, 단순 UI 상태는 가까운 컴포넌트 state로 유지합니다.

실무에서 주의할 점

• 서버 상태를 전역 클라이언트 store에 무분별하게 복사하면 stale 데이터가 늘어납니다.
• 모든 상태를 한 곳에 모으면 변경 영향 범위가 커질 수 있습니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

상태관리, 서버상태, 클라이언트상태, React

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, 서버 상태는 서버가 원천 소유권을 가진 비동기 데이터로 캐싱, 동기화, 재검증, 로딩·에러 처리가 중요합니다. 클라이언트 상태는 모달 열림, 입력 중인 값, 선택된 탭처럼 UI 내부 상호작용을 표현하는 상태입니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.