서버 상태와 클라이언트 상태를 구분해야 하는 이유를 설명해주세요.

서버 상태는 클라이언트가 소유하지 않는 원격 데이터입니다. 사용자 목록, 게시글 상세, 결제 상태처럼 원본이 서버에 있고, 네트워크 지연·캐싱·동기화·재검증 문제가 함께 따라옵니다.

클라이언트 상태는 현재 브라우저 UI가 소유하는 상태입니다. 모달 열림 여부, 탭 선택값, 입력 중인 폼 값, 드래그 중인 좌표처럼 서버와 무관하게 화면 안에서만 의미가 있는 값입니다.

둘을 구분하지 않으면 상태 관리가 불필요하게 복잡해집니다. 예를 들어 API 응답을 전역 store에 직접 넣고 수동으로 로딩, 에러, 캐시 만료, 재요청을 관리하면 React Query나 SWR이 해결해주는 문제를 다시 구현하게 됩니다.

서버 상태에는 다음 고민이 필요합니다.

• 캐시를 얼마나 유지할지
• 언제 재검증할지
• mutation 후 어떤 쿼리를 무효화할지
• 실패 시 재시도할지

클라이언트 상태는 보통 가까운 컴포넌트 state나 작은 전역 store로 충분합니다.

면접에서는 “서버 상태는 동기화 문제, 클라이언트 상태는 UI 표현 문제”라고 나눠 설명하면 좋습니다. 이 구분이 명확하면 도구 선택도 자연스럽게 정리됩니다.