ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

폼

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

데이터 표시

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

펼침과 전환

Tabs

Accordion

Segmented Control

오버레이

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

동적 렌더링

Cond

Match

Foreach

Auto Scroll

미디어

Image

Audio

Video

표와 데이터 그리드

Table

Data Table

Data Editor

차트

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

차트 부품

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

다른 차트 라이브러리

Plotly

Pyplot

HTML 요소

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

그 밖의 도구

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

컴포넌트 공방: Reflex 라이브러리 100

동적 렌더링

Match

rx.match

공식 문서

공방 주문서

배달 주문 화면에 주문 상태 배지를 넣어 주세요. 접수·조리 중·배달 중·완료·취소마다 아이콘과 색이 달라야 합니다.

rx.match는 값 하나를 여러 경우와 견주어, 맞는 경우의 컴포넌트를 보여 줍니다. 파이썬의 match·case와 같은 생각입니다. rx.cond는 두 갈래만 고르므로, 갈래가 셋 이상이면 rx.cond를 겹치는 대신 rx.match가 훨씬 읽기 쉽습니다. 모양은 이렇습니다.

rx.match(
    condition,
    (case_1, component_1),
    (case_2, component_2),
    ...
    default_component,
)

첫 인자(condition): 견줄 값. 보통 State 변수입니다.
(경우, 컴포넌트) 튜플: 값이 경우와 같으면 그 컴포넌트를 보입니다. 위에서부터 차례로 견줍니다.
마지막의 튜플이 아닌 인자: 어느 경우에도 맞지 않을 때의 기본값(default)입니다.

아래에서 품종을 고르면 맞는 문장이 보이고, 목록에 있지만 경우에 없는 pug·corgi를 고르면 기본값이 보입니다.

Unknown cat breed selected.

class MatchBasicState(rx.State):
    cat_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "ragdoll", "pug", "corgi"]

    @rx.event
    def set_cat_breed(self, breed: str):
        self.cat_breed = breed


rx.flex(
    rx.match(
        MatchBasicState.cat_breed,
        ("persian", rx.text("Persian cat selected.")),
        ("siamese", rx.text("Siamese cat selected.")),
        ("maine coon", rx.text("Maine Coon cat selected.")),
        ("ragdoll", rx.text("Ragdoll cat selected.")),
        rx.text("Unknown cat breed selected."),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick a breed"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchBasicState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchBasicState.cat_breed,
        on_change=MatchBasicState.set_cat_breed,
    ),
    direction="column",
    spacing="2",
)

값 바꿔 보기

rx.match에는 생김새 속성이 없으므로 견줄 값을 바꿔 봅니다. 두 번째 튜플처럼 경우를 여러 개 적으면 그중 하나만 맞아도 됩니다. 실제 앱에서는 "paid" 자리에 State 변수가 들어갑니다.

속성 바꿔 보기

Paid

status

rx.match(
    "paid",
    ("paid", rx.badge(rx.icon("credit-card", size=14), "Paid", color_scheme="blue")),
    ("packing", "shipping", rx.badge(rx.icon("truck", size=14), "On the way", color_scheme="orange")),
    ("done", rx.badge(rx.icon("circle-check", size=14), "Delivered", color_scheme="green")),
    rx.badge(rx.icon("circle-help", size=14), "Unknown", color_scheme="gray"),
)

packing과 shipping은 같은 배지를 씁니다. 경우에 없는 값(refunded)은 마지막의 기본값으로 갑니다.

인자	값	쓰임
첫째(`cond`)	Var 또는 값	견줄 값
`(경우, …, 결과)`	튜플(2개 이상)	앞의 값들 중 하나와 같으면 마지막 항목을 돌려준다
마지막 인자	컴포넌트 또는 값	기본값. 결과가 컴포넌트면 생략 가능(빈 `rx.fragment()`)

기본값 규칙

기본값은 맨 마지막의 튜플이 아닌 인자입니다. 튜플이 아닌 인자는 모두 기본값으로 보므로, 중간에 두면 오류입니다.
기본값은 하나만 둡니다. 둘을 두면 오류입니다.
결과가 컴포넌트이면 기본값을 생략할 수 있고, 그때는 rx.fragment()(아무것도 없음)가 기본값이 됩니다.
결과가 컴포넌트가 아닌 값(문자열 등)이면 기본값을 꼭 적어야 합니다.
경우 튜플에는 경우와 결과, 적어도 두 항목이 있어야 합니다.

아래 코드는 위 규칙을 차례로 보인 것으로, 3번 말고는 모두 만들 때 오류가 납니다.

# 1) default is not last -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    rx.text("Unknown cat breed selected."),
    ("siamese", rx.text("siamese cat selected")),
)

# 2) two defaults -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
    rx.text("Unknown cat breed selected."),
    rx.text("Another unknown cat breed selected."),
)

# 3) OK: components without a default -> rx.fragment() is the default
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
)

# 4) plain values without a default -> error
rx.match(
    MatchState.cat_breed,
    ("persian", "persian cat selected"),
    ("siamese", "siamese cat selected"),
)

# 5) a case tuple needs at least two items -> error
rx.match(
    MatchState.cat_breed,
    ("persian",),
    ("maine coon", rx.text("Maine Coon cat selected")),
)

여러 값을 한 경우로

튜플 안에 경우를 여러 개 적고 마지막에 결과를 둡니다. 튜플의 마지막 항목이 늘 결과입니다. 고양이 품종 세 가지, 개 두 가지, 말 두 가지를 한 문장으로 묶었습니다. football과 golf는 어디에도 없어 기본값이 보입니다.

Unknown animal breed

class MatchMultiState(rx.State):
    animal_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "pug", "corgi", "mustang", "rahvan", "football", "golf"]

    @rx.event
    def set_animal_breed(self, breed: str):
        self.animal_breed = breed


rx.flex(
    rx.match(
        MatchMultiState.animal_breed,
        ("persian", "siamese", "maine coon", rx.text("Breeds of cats.")),
        ("pug", "corgi", rx.text("Breeds of dogs.")),
        ("mustang", "rahvan", rx.text("Breeds of horses.")),
        rx.text("Unknown animal breed"),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick one"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchMultiState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchMultiState.animal_breed,
        on_change=MatchMultiState.set_animal_breed,
    ),
    direction="column",
    spacing="2",
)

속성 값으로 쓰기

rx.cond처럼 rx.match도 결과로 값을 주면 속성 자리에 넣을 수 있습니다. 아래 배지의 color_scheme은 값이 1이면 red, 2면 blue, 6이면 purple, 10이면 orange, 그 밖에는 green입니다. 경우에는 숫자도 쓸 수 있습니다.

class MatchPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchPropState.decr, color_scheme="red"),
    rx.badge(
        MatchPropState.value,
        color_scheme=rx.match(
            MatchPropState.value,
            (1, "red"),
            (2, "blue"),
            (6, "purple"),
            (10, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchPropState.incr),
    align_items="center",
    spacing="3",
)

여러 값을 한 경우로 묶는 것도 속성에서 똑같이 됩니다. 1·3·9는 red, 2·4·5는 blue, 6·8·12는 purple, 10·15·20·25는 orange입니다.

class MatchMultiPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchMultiPropState.decr, color_scheme="red"),
    rx.badge(
        MatchMultiPropState.value,
        color_scheme=rx.match(
            MatchMultiPropState.value,
            (1, 3, 9, "red"),
            (2, 4, 5, "blue"),
            (6, 8, 12, "purple"),
            (10, 15, 20, 25, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchMultiPropState.incr),
    align_items="center",
    spacing="3",
)

참·거짓이면 cond

rx.match는 여러 값을 견주는 데 씁니다. 견줄 값이 True/False 둘뿐이라면 rx.cond(State.value == 10, "true value", "false value")처럼 rx.cond가 알맞습니다.

주문서 완성

상태 문자열 하나를 다섯 갈래로 나눕니다. 마지막 cancelled는 경우로 적지 않고 기본값으로 받았습니다. 버튼을 누르면 다음 상태로 넘어갑니다.

Receivedreceived

MATCH_ORDER_STEPS = ["received", "cooking", "delivering", "delivered", "cancelled"]


class MatchOrderState(rx.State):
    status: str = "received"

    @rx.event
    def next_step(self):
        i = MATCH_ORDER_STEPS.index(self.status)
        self.status = MATCH_ORDER_STEPS[(i + 1) % len(MATCH_ORDER_STEPS)]


rx.hstack(
    rx.match(
        MatchOrderState.status,
        ("received", rx.badge(rx.icon("clipboard-check", size=14), "Received", color_scheme="gray")),
        ("cooking", rx.badge(rx.icon("chef-hat", size=14), "Cooking", color_scheme="amber")),
        ("delivering", rx.badge(rx.icon("bike", size=14), "On the way", color_scheme="blue")),
        ("delivered", rx.badge(rx.icon("house", size=14), "Delivered", color_scheme="green")),
        rx.badge(rx.icon("ban", size=14), "Cancelled", color_scheme="red"),
    ),
    rx.button("Next status", on_click=MatchOrderState.next_step, size="1", variant="soft"),
    rx.code(MatchOrderState.status),
    align="center",
    spacing="3",
)

공방 노트

rx.match(값, (경우, 결과), ..., 기본값). 갈래가 셋 이상이면 cond 겹치기 대신.
한 튜플에 경우를 여럿: ("a", "b", 결과). 튜플의 마지막이 결과.
기본값은 맨 끝에 하나. 결과가 컴포넌트면 생략 가능, 값이면 필수.
결과로 값을 주면 color_scheme 같은 속성에 넣을 수 있다.
참·거짓 두 갈래는 rx.cond.

← 이전

동적 렌더링 · Cond

동적 렌더링 · Foreach

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex