컴포넌트 공방: Reflex 라이브러리 100
·
강의 개요
레이아웃
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
타이포그래피
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
공방 주문서
상품 목록 위에 '격자 / 목록' 보기 전환을 붙이고, 고른 쪽 모양으로 상품을 보여 주세요.
세그먼트 컨트롤은 정해진 몇 가지 값이나 화면 중 하나를 고르는 버튼 묶음입니다. "Inbox / Drafts / Sent"처럼 하나만 켜지는 선택을 분명하게 보여 줍니다. 드롭다운은 고른 값만 보이고, 버튼 여러 개는 어느 것이 켜졌는지 잘 드러나지 않는데, 세그먼트 컨트롤은 보기 전체와 지금 고른 것을 함께 보여 줍니다.
rx.segmented_control.root가 rx.segmented_control.item들을 묶고, 각 item은 보이는 글과 유일한 value를 가집니다.
rx.segmented_control.root(
rx.segmented_control.item("Inbox", value="inbox"),
rx.segmented_control.item("Drafts", value="drafts"),
rx.segmented_control.item("Sent", value="sent"),
default_value="inbox",
)속성 바꿔 보기
size
variant
color
radius
rx.segmented_control.root(
rx.segmented_control.item("Inbox", value="inbox"),
rx.segmented_control.item("Drafts", value="drafts"),
rx.segmented_control.item("Sent", value="sent"),
default_value="inbox",
size="2",
variant="surface",
color_scheme="indigo",
radius="medium",
)| 부품 | 속성 | 값 | 쓰임 |
|---|---|---|---|
root | default_value | item의 value | 처음 고른 값(비제어) |
root | value + on_change | State 값, 이벤트 | 고른 값을 State로 다룬다(제어) |
root | type | "single"(기본) "multiple" | 하나만 고를지, 여럿을 고를지 |
root | size | "1" "2"(기본) "3" | 크기 |
root | variant | "surface"(기본) "classic" | 바탕 모양 |
root | color_scheme · radius | Radix 색 이름, 모서리 값 | 색과 모서리 |
item | value | 문자열(유일) | 이 칸의 값 |
공식 문서의 기본 예제처럼 value에 State 값을, on_change에 그 값을 바꾸는 이벤트를 연결합니다. 칸을 고르면 on_change가 고른 item의 value를 넘기고, State가 바뀌면 화면의 다른 곳도 따라 바뀝니다. 여기서는 고른 값으로 글 정렬을 바꿉니다.
on_change는 type에 따라 문자열이나 문자열 리스트를 넘기므로, 핸들러의 인자 타입은 str | list[str]로 적어야 합니다. str만 적으면 Reflex가 타입이 맞지 않는다는 오류를 냅니다.
Aligned left
class SegmentedAlignState(rx.State):
control: str = "left"
@rx.event
def set_segmented_align(self, value: str | list[str]):
if isinstance(value, str):
self.control = value
rx.vstack(
rx.segmented_control.root(
rx.segmented_control.item("Left", value="left"),
rx.segmented_control.item("Center", value="center"),
rx.segmented_control.item("Right", value="right"),
value=SegmentedAlignState.control,
on_change=SegmentedAlignState.set_segmented_align,
),
rx.card(
rx.text("Aligned " + SegmentedAlignState.control, align=SegmentedAlignState.control),
width="100%",
),
width="100%",
)type="multiple"이면 여러 칸을 함께 켤 수 있고, 값은 리스트가 됩니다. item 안에는 글 대신 아이콘을 넣을 수도 있습니다. 아래는 굵게·기울임·밑줄 버튼입니다. Reflex 0.10은 컴포넌트를 만들 때 type이 "multiple"인지 직접 확인하므로, type은 State 값이 아닌 고정된 값으로 줍니다. 그래서 실습대에도 넣지 않았습니다.
Sample text
value = bold
class SegmentedStyleState(rx.State):
styles: list[str] = ["bold"]
@rx.event
def set_segmented_styles(self, value: str | list[str]):
self.styles = [value] if isinstance(value, str) else list(value)
rx.vstack(
rx.segmented_control.root(
rx.segmented_control.item(rx.icon("bold", size=16), value="bold"),
rx.segmented_control.item(rx.icon("italic", size=16), value="italic"),
rx.segmented_control.item(rx.icon("underline", size=16), value="underline"),
type="multiple",
value=SegmentedStyleState.styles,
on_change=SegmentedStyleState.set_segmented_styles,
),
rx.text(
"Sample text",
weight=rx.cond(SegmentedStyleState.styles.contains("bold"), "bold", "regular"),
font_style=rx.cond(SegmentedStyleState.styles.contains("italic"), "italic", "normal"),
text_decoration=rx.cond(SegmentedStyleState.styles.contains("underline"), "underline", "none"),
),
rx.text("value = ", SegmentedStyleState.styles.join(", "), size="1", color_scheme="gray"),
)고른 값에 따라 rx.cond로 격자와 목록을 바꿔 보여 줍니다. item에는 아이콘과 글을 함께 넣었습니다.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class SegmentedViewState(rx.State):
view: str = "grid"
@rx.event
def set_segmented_view(self, value: str | list[str]):
if isinstance(value, str):
self.view = value
rx.vstack(
rx.segmented_control.root(
rx.segmented_control.item(rx.icon("layout-grid", size=14), "Grid", value="grid"),
rx.segmented_control.item(rx.icon("list", size=14), "List", value="list"),
value=SegmentedViewState.view,
on_change=SegmentedViewState.set_segmented_view,
size="1",
),
rx.cond(
SegmentedViewState.view == "grid",
rx.grid(*[rx.card(rx.text("Item ", i), height="60px") for i in range(1, 7)], columns="3", spacing="2", width="100%"),
rx.vstack(*[rx.card(rx.text("Item ", i), width="100%") for i in range(1, 7)], spacing="2", width="100%"),
),
width="100%",
max_width="420px",
)공방 노트
segmented_control.root 안에 segmented_control.item("글", value=…)을 넣는다.
default_value로 비제어, value + on_change로 State가 다루기(제어).
on_change 핸들러의 인자 타입은 str | list[str].
type="multiple"이면 여러 칸을 켜고 값은 리스트가 된다.
size · variant(surface · classic) · color_scheme · radius로 모양을 정한다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.