상태 기반 UI
UI는 이벤트나 스타일 변화의 집합이 아니라,
명확하게 정의된 상태(State)의 집합으로 설계합니다.
상태는 data-* 속성으로 전달하고, CSS가 해석하며, JavaScript는 상태 변경만 담당합니다.
이 문서는 상태 기반 UI의 구현에 집중합니다.
CSS·JavaScript·데이터 속성을 왜 3분할하는지에 대한 원칙은 역할 분리 원칙을 참고합니다.
왜 상태 중심인가
Section titled “왜 상태 중심인가”상태 기반 UI는
UI의 현재 모습을 개별 동작이 아닌 상태 값으로 표현하는 방식입니다.
- UI는 항상 하나 이상의 상태를 가집니다.
- 상태가 바뀌면 UI 표현이 바뀝니다.
- 상태가 정의되지 않은 동작은 허용하지 않습니다.
상태는
암묵적인 클래스 조합이 아니라,
의도적으로 선언된 값이어야 합니다.
상태 표현 기준
Section titled “상태 표현 기준”UI 상태는 다음 기준에 따라 표현합니다.
- 상태는 명확한 이름을 가집니다.
- 상태는 데이터 속성으로 표현합니다.
- 상태는 Boolean 또는 명시적인 값으로 정의합니다.
상태를 기준으로 UI를 이해하고 설계합니다.
data-* 상태 전달과 명명
Section titled “data-* 상태 전달과 명명”상태와 스크립트 제어는 클래스가 아닌 **데이터 속성(data-*)**으로 전달합니다.
데이터 속성은 구조와 스타일을 침범하지 않는 중립적인 상태 전달 수단입니다.
데이터 속성은 다음 역할만을 담당합니다.
- UI 상태 전달
- 스크립트 제어 대상 식별
- 구조와 동작 간 연결 고리 역할
데이터 속성은 다음 원칙을 따릅니다.
- 구조를 변경하지 않습니다.
- 스타일을 정의하지 않습니다.
- 상태와 역할 전달 용도로만 사용합니다.
- 클래스 네이밍을 대체하지 않습니다.
데이터 속성은
CSS와 JavaScript 사이의 중간 계층으로 취급합니다.
CSS 해석과 JavaScript 변경의 경계
Section titled “CSS 해석과 JavaScript 변경의 경계”상태는 data-*로 전달되고, CSS는 그 값을 해석해 표현하며, JavaScript는 값만 바꿉니다.
- 데이터 속성은 상태를 전달합니다.
- CSS는 전달된 상태를 해석해 스타일을 적용합니다.
- JavaScript는 상태 변경만 제어합니다.
JavaScript는
UI를 “어떻게 보이게 할지”가 아니라
“어떤 상태로 바꿀지”만 결정합니다.
JavaScript는 다음 역할을 수행하는 것을 지양합니다.
- UI 구조 생성 또는 변경
- 스타일 직접 제어
- 클래스 네이밍 규칙을 우회하는 조작
- 구조와 상태를 혼합한 처리
JavaScript가 구조나 스타일을 직접 제어하기 시작하면
UI 설계는 빠르게 복잡해집니다.
설계 시 판단 기준
Section titled “설계 시 판단 기준”상태와 그 구현을 설계할 때는 다음을 기준으로 판단합니다.
- 이 동작이 새로운 상태로 분리될 필요가 있는가
- 상태 이름만으로 의미가 전달되는가
- 클래스 네이밍으로 해결 가능한 문제는 아닌가
- 구조 변경 없이 상태로 표현 가능한가
- 다른 상태와 충돌하지 않는가
상태 기반 UI의 목적
Section titled “상태 기반 UI의 목적”상태 기반 UI는
UI 동작을 단순화하고,
CSS와 JavaScript의 책임을 명확히 분리하기 위한 기준입니다.
상태가 명확할수록
UI는 더 안정적이고 예측 가능하게 동작합니다.