디자인 시스템 컴포넌트 만들 때의 고민, State와 Status의 차이?

State (상태)

• 정의: state는 컴포넌트의 현재 조건이나 내부 상호작용의 결과를 나타냅니다. 사용자 행동(클릭, 입력 등)에 따라 컴포넌트가 가진 변화하는 상태를 설명하는 데 사용됩니다.
• 예시:
  • Button: state="active", state="disabled", state="loading"
  • Input: state="focused", state="filled", state="error"
• 사용 목적: state는 컴포넌트 내부의 동적 변화와 직접적으로 연관되어 있어, 사용자 경험을 반영하는 데 중점을 둡니다. 예를 들어, 버튼이 비활성화되어 있는 경우 사용자 상호작용이 제한된 상태임을 나타냅니다.

2. Status (상태 표시)

• 정의: status는 컴포넌트의 외부 상황이나 현재 상황에 대한 설명을 제공합니다. 보통 시스템이나 데이터 상태를 나타내며, 사용자가 직접적으로 상호작용한 결과가 아닌 현재의 진행 상황이나 정보 알림을 전달하는 데 쓰입니다.
• 예시:
  • Badge: status="success", status="error", status="warning"
  • Notification: status="new", status="unread"
  • Progress Indicator: status="in-progress", status="completed"
• 사용 목적: status는 컴포넌트가 가진 정보를 사용자에게 명확하게 전달하는 데 초점을 두고 있습니다. 예를 들어, 성공 상태를 나타내는 status="success"는 사용자가 현재 작업이 성공적으로 완료되었음을 확인하도록 돕습니다.

비교 및 구분

• state는 컴포넌트 자체의 조건이나 UI의 동적 반응을 나타내며, 사용자와의 상호작용에 따라 변하는 상태에 집중합니다.
• status는 컴포넌트의 외부 상황을 설명하고, 정보 전달에 목적이 있어 상황의 결과나 현재 상태를 나타내는 데 주로 쓰입니다.

사용 예시

• Button 컴포넌트에서 state는 버튼이 활성화된 상태인지, 로딩 중인지 등을 나타낼 수 있으며, status는 버튼이 클릭 성공 여부를 표시하는 용도로 활용될 수 있습니다.
• Alert 컴포넌트에서는 state는 열림/닫힘을 나타내고, status는 메시지 유형(에러, 경고, 정보 등)을 전달합니다.