임계값 규칙 공통
"값이 이러면 저것"을 줄줄이 적어 두는 조건표. 모습을 바꾸는 거의 모든 바인딩이 이걸 씁니다.
규칙 = (연산자, 비교값, 출력) 의 목록 · 위에서부터 첫 매치 · 아무것도 안 맞으면 기본값설명

설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 연산자 | op | — | < <= > >= == != 여섯 가지. |
| 비교값 | number | string | bool | — | 값과 견줄 대상. |
| 출력 | string | — | 맞았을 때 내보낼 것. prop 마다 뜻이 다릅니다 — 색이거나, 글자이거나, 상태 이름이거나. |
| 기본값 | string | (없음) | 어떤 규칙에도 안 맞을 때. 이것도 없으면 prop 마다 정해진 폴백으로 갑니다. |
동작
순서가 곧 우선순위입니다. 위에서부터 첫 매치가 이깁니다.
> 90 → 빨강/> 70 → 주황/기본 초록은 뜻대로 동작합니다.- 순서를 뒤집어
> 70 → 주황을 위에 두면 값 95 도 주황이 됩니다. 90 줄에는 닿지도 않습니다.
범위를 적을 때는 좁은 쪽부터 위에 두세요. 위아래로 겹치는 조건을 쓸 때 흔히 놓치는 지점이고, 규칙이 열 줄을 넘어가면 눈으로는 잘 안 보입니다.
== 와 != 는 느슨하게 비교합니다. 숫자 1과 글자 "1"이 같은 것으로 취급되고, true 와 1도 같습니다. 대부분은 이게 편하지만(태그가 문자열로 오는 프로토콜이 있습니다), "1" 과 1 을 구분해야 하는 화면이라면 이 방식으로는 나눌 수 없습니다.
크기 비교(< <= > >=)는 항상 숫자로 바꿔서 견줍니다. 글자 값이 들어오면 숫자로 바꿔지지 않아 어느 줄에도 안 맞고 기본값으로 갑니다. 글자를 견주려면 == 를 쓰세요.
규칙이 하나도 없으면 규칙 자체가 없는 것으로 봅니다 — 기본값도 쓰이지 않고, prop 마다 정해진 폴백으로 넘어갑니다. 색 계열은 "태그 값이 글자면 그 글자를 색으로", 그 외에는 아무 일도 하지 않는 식입니다.
해 보기
제품 샘플 › 물탱크 미믹수위 HI/LO 경보 — 규칙 7개로 색과 글자를 함께 바꾼다
제품에 들어 있는 샘플
제품 샘플 › 지하철 차내 정차 안내규칙 36개짜리 실제 운영 화면. 순서가 왜 중요한지 보인다
제품에 들어 있는 샘플
제품 샘플 › 바인딩 표현 사전18가지 prop 을 한 화면에 나란히 놓고 비교
제품에 들어 있는 샘플