[위클리페이퍼] 서버 상태와 클라이언트 상태의 차이

 

서버 상태 (Server state)

 

서버 상태란 사용자 정보, API 응답, 데이터베이스에 저장된 데이터 등 서버나 외부 데이터 소스에 저장된 데이터를 뜻한다.

 

서버 상태에는 다음과 같은 특징이 있다.

• 지속성: 서버 상태는 일반적으로 세션 간에 지속성이 유지된다. 사용자가 애플리케이션을 종료해도 데이터는 서버에 남는다는 뜻이다. 그래서 쇼핑몰의 재고 상태나 사용자가 올린 글 등은 계속 남아있게 된다.
• 일관성: 서버에서 데이터가 관리되므로 데이터의 일관성이 유지된다. 이런 특징은 동일 데이터를 여러 클라이언트가 참조해도 동일한 최신 상태의 문서를 참조하고 편집이 가능하다.
• API 호출: 클라이언트는 서버 상태를 가져오기 위해 API 호출을 하고, 이 과정을 통해 데이터 접근이나 업데이트가 가능해진다. 그러나 이 때문에 접근 또는 업데이트 속도가 상대적으로 느릴 수 있다.
• 안전성: 인증과 암호화로 데이터를 보호할 수 있어서 더 안전하다.
• 확장성: 전용 서버나 고용량의 데이터 소스로 관리되기 때문에 클라이언트 상태보다 확장성이 높을 수 있다.

서버

 

클라이언트 상태 (Client state)

 

클라이언트 상태는 클라이언트 측에서 관리되는 데이터를 뜻하며, 여기에는 컴포넌트 상태, 전역 상태, 브라우저 쿠키 등이 포함된다.

 

클라이언트 상태는 서버 상태와 다른 다음과 같은 특징이 있다.

• 비지속성: 클라이언트 상태는 애플리케이션의 세션 동안만 유지되기 때문에, 사용자가 새로고침하거나 종료하면 상태는 사라질 수 있다. 그래서 form에 뭔가를 입력하거나 모달을 띄워놔도 새로고침하면 모두 사라지게 된다.
• 반응성: 클라이언트 상태는 사용자와의 즉각적인 상호작용을 위해 사용되기 때문에 사용자의 입력에 따라 쉽게 변경된다. 사용자 경험과도 밀접한 관련이 있는 특징이다.
• 클라이언트 관리: 클라이언트 상태는 리액트의 useState, useReducer 훅이나 Redux나 Jotai, zustand 등 상태관리 라이브러리를 통해 관리된다. 네트워크 요청이 필요없어서 접근 및 업데이트 속도가 상대적으로 빠르다.
• 약한 보안성: 클라이언트가 액세스할 수 있고 변조 또는 가로채기 대상이 될 수 있어서 서버 상태에 비해 보안성이 낮다. 그래서 민감정보는 클라이언트 상태로 관리하지 않는다.
• 약한 확장성: 클라이언트 기기의 용량에 제한을 받아 지속적인 데이터 동기화나 데이터 손실 등의 문제가 있기 때문에 서버 상태에 비해 확장성이 떨어질 수 있다.

클라이언트

 

왜 "상태"라고 표현하는가?

 

"상태"는 시스템이나 컴포넌트가 가지는 데이터의 집합을 말한다. 이는 단순히 고정된 값이 아니라 데이터가 어떻게 변화하고 관리되는지를 강조하는 개념이다.

 

상태라고 표현하는 이유에 대해 아래 네 가지 포인트로 알아볼 수 있을 것 같다.

• 변화 가능성 강조: 상태는 사용자와의 상호작용, 외부 데이터 변경에 따라 변화한다. 예를 들어, 사용자가 버튼을 눌러 드롭다운메뉴를 열면 UI의 상태가 변경되고, 이로 인해 화면에 표시되는 내용이 달라지는 것이 있다.
• 현재 상황 표현: 상태는 특정 시점에서의 데이터를 나타낸다. 사용자가 입력한 내용, 사용자에 의해 활성화된 탭 등을 상태라고 부르며, 이는 그 순간의 상황을 반영한다.
• 비유적 의미: 상태는 "현재 모습"을 의미하는 비유적 표현이다. 애플리케이션이 어떤 "상태"에 있는지를 표현함으로써, 개발자는 그에 맞는 로직을 적용하고 사용자에게 적절한 피드백을 제공할 수 있다.
• 상태 기반 프로그래밍: 현대 웹개발에서는 상태 기반 프로그래밍이 일반적이다. 이는 컴포넌트 상태에 따라 UI가 어떤 식으로 렌더링될지 결정하는 방식이다. 그래서 이러한 접근은 상태라는 용어를 더 자연스럽게 만든다.