상태 관리 (State Management)

상태 (State)

자바스크립트 애플리케이션에서 상태란 사용자 인터페이스(UI)가 필요로 하는 모든 데이터와 값을 의미한다. 상태는 UI의 결과물(View)을 결정짓는 핵심 요소로, 상태가 변하면 UI 역시 그에 따라 자동으로 다시 렌더링되어야 한다.

예를 들어, 로그인한 사용자 정보, 체크된 체크박스 상태, 장바구니에 담긴 상품 목록, 다크 모드 설정, 서버에서 받아온 API 응답 등이 이에 해당한다.

상태 관리 (State Management)

이러한 상태가 변경될 때마다 UI도 그에 맞춰 갱신되어야 한다. 상태 변경 과정을 예측 가능하고 일관성 있게 만들기 위한 기법과 도구들의 집합을 상태 관리라고 한다.

상태 관리가 필요한 이유

작은 규모의 애플리케이션에서는 컴포넌트 내부의 useState나 단순한 객체로도 충분하다. 하지만 규모가 커지면 다음과 같은 문제들이 발생한다:

1. 여러 컴포넌트에서 상태를 공유하고 변경함

서로 다른 컴포넌트가 같은 데이터(예: 로그인 정보)를 필요로 하며, 동시에 접근하거나 변경하게 되면 일관성을 유지하기 어려워진다.

2. 변경 타이밍 예측 어려움

비동기 요청, 이벤트 처리 등이 뒤섞이며 상태 일관성 깨짐

3. 디버깅 및 유지보수 곤란

어떤 액션이 상태를 어떻게 바꿨는지 추적하기 어려움

이처럼 상태의 복잡성이 증가할수록 관리의 어려움도 커지며, 이를 해결하기 위해 등장한 개념이 바로 상태 관리다. 또한 상태는 직접 수정하는 것이 아니라, 불변성을 유지하며 새로운 상태를 생성하는 방식으로 변경해야 한다. 이는 상태 변화의 추적을 용이하게 하고, UI 업데이트를 정확하게 반영하기 위함이다.

상태 관리 범위

1. 로컬 상태(Local State)

단일 컴포넌트 내부에서만 쓰이는 상태
React의 useState, Vue의 data 등이 해당

2. 글로벌 상태(Global State)

애플리케이션 전체에서 공유되는 상태
로그인 정보, 테마 설정, 언어 설정 등

로컬 상태와 글로벌 상태를 명확히 구분해, 로컬에서는 간단히 훅이나 컴포넌트 내부 변수로, 글로벌에서는 상태 관리 라이브러리나 Context API 등을 사용하는 것이 좋다.

상태 관리 직접 구현 예시 (Vanilla JS)

컴포넌트가 자체적으로 상태를 관리하는 방식은 다음과 같이 구현할 수 있다. 아래 예시는 프레임워크 없이 순수 자바스크립트 기반 컴포넌트에서 상태를 직접 관리하고 반영하는 방식이다. React는 setState, render 등의 메커니즘을 내부적으로 활용해 상태 변화에 따라 UI를 갱신한다.

// 초기 상태 정의
this.state = {
  // 초기 상태 값들
};

// 상태 변경 함수 정의
this.setState = (nextState) => {
  this.state = nextState;
  this.render(); // 상태 변경 후 UI 다시 렌더링
};

// 렌더링 함수
this.render(){
  // UI 렌더링 로직
}

상태 관리 (State Management) ​

상태 (State) ​