서버 상태와 클라이언트 상태, 무엇이 다를까?

프론트엔드 애플리케이션을 설계할 때 가장 중요한 고민 중 하나는 **상태(state)**를 어떻게 정의하고, 어떤 방식으로 관리할 것인가이다. 특히, 다양한 상태가 뒤섞여 있는 복잡한 화면을 개발하다 보면 모든 상태를 동일한 방식으로 다루는 것이 오히려 문제를 일으키는 경우가 많다.

이런 맥락에서 상태를 분류할 때 가장 기본이 되는 개념이 바로 **서버 상태(server state)**와 **클라이언트 상태(client state)**의 구분이다. 이 둘의 차이를 명확히 이해하는 것은 올바른 상태 관리 전략을 수립하는 데 핵심적인 출발점이 된다.

클라이언트 상태란?

클라이언트 상태는 말 그대로 사용자의 브라우저나 앱 내에서 직접 생성되고 제어되는 상태를 의미한다. 이는 외부 시스템이나 서버의 영향을 받지 않고, 애플리케이션 내부에서 독립적으로 존재한다.

대표적인 예로는 다음과 같은 것들이 있다:

• 모달의 열림/닫힘 여부
• 탭 선택 상태
• 폼 입력 값
• 로컬 필터링 조건
• UI에서의 선택 여부, 스크롤 위치 등

클라이언트 상태는 일반적으로 useState, useReducer, 혹은 상태 관리 라이브러리(Redux, Zustand 등)를 통해 관리되며, 즉각적으로 업데이트할 수 있고 예측 가능하다. 이 상태들은 사용자 경험과 UI의 즉각적인 반응성에 직접적인 영향을 미친다.

서버 상태란?

반면, 서버 상태는 외부 시스템(예: API, 데이터베이스 등)에서 가져오는 데이터로 구성된다. 클라이언트가 직접 이 데이터를 생성하거나 수정할 수는 없으며, 오직 요청(fetch, mutation)을 통해 읽거나 변경할 수 있다.

서버 상태의 주요 특징은 다음과 같다:

• 비동기적으로 동작한다
• 네트워크 오류나 지연이 발생할 수 있다
• 동일한 데이터에 여러 클라이언트가 접근할 수 있어 동기화 이슈가 발생할 수 있다
• 캐싱 전략이 필요할 수 있다

예를 들어, 유저의 프로필 정보, 게시물 목록, 외부 API에서 받아오는 통계 데이터 등은 모두 서버 상태에 해당한다. 이러한 상태는 일정 시간이 지나면 바뀔 수 있고, 서버의 변화에 따라 항상 최신 상태를 유지해야 하는 특성을 가진다.

두 상태를 구분하는 이유

서버 상태와 클라이언트 상태를 구분하지 않고 동일한 방식으로 다룰 경우 여러 가지 문제가 발생할 수 있다. 대표적으로 다음과 같은 상황이 있다:

• 서버 데이터를 가져오는 로직과 UI 상태가 뒤섞여 컴포넌트가 지나치게 복잡해짐
• 서버 데이터를 갱신할 때 전체 컴포넌트를 리렌더링하거나 불필요한 재요청 발생
• 데이터가 바뀌었는지 여부를 판단하기 위해 별도의 비교 로직 필요

이러한 문제를 해결하기 위해 등장한 것이 바로 React Query와 같은 서버 상태 전용 관리 도구다. 이들은 서버 상태를 별도로 관리하고, 캐싱, 리페치, 에러 처리 등을 일관되게 처리할 수 있게 해준다.

마무리하며

요약하자면, 클라이언트 상태는 애플리케이션 내부에서 즉각적으로 다룰 수 있는 UI 중심의 상태이고, 서버 상태는 외부에서 가져온 데이터를 기반으로 하며 비동기적이고 동기화가 필요한 상태다. 이 둘을 명확히 구분하고 각 상태에 맞는 전략과 도구를 사용하는 것은 애플리케이션의 유지보수성과 성능, 안정성을 크게 향상시킨다.

상태 관리에서 가장 중요한 것은 단순화이며, 그 출발점은 상태의 종류를 올바르게 이해하는 데서 시작된다.