컴포넌트 공방: 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
공방 주문서
결제 화면에 눈에 띄는 '구매' 버튼 하나와, 덜 중요한 '취소' 버튼 하나를 만들어 주세요.
rx.button은 누르면 무언가가 일어나는 자리입니다. 저장, 제출, 다음 단계, 대화상자 열기처럼 사용자가 "실행"하는 모든 곳에 씁니다. 글자를 넘기면 그대로 버튼 안에 들어갑니다.
rx.button("Save")버튼의 생김새는 대부분 다섯 가지 속성으로 정합니다. 아래 실습대에서 값을 바꾸면 버튼과 코드가 함께 바뀝니다.
속성 바꿔 보기
label
variant
size
color
radius
high_contrast
loading
disabled
rx.button("Buy now", variant="solid", size="2", color_scheme="indigo", radius="medium", high_contrast=False, loading=False, disabled=False)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
variant | "classic" "solid" "soft" "surface" "outline" "ghost" | "solid" | 강조 정도. 화면의 주된 동작은 solid, 보조 동작은 soft·outline·ghost |
size | "1" ~ "4" | "2" | 높이와 글자 크기 |
color_scheme | Radix 색 이름("indigo", "red" …) | 테마 색 | 의미가 있는 색. 삭제는 red, 성공은 green처럼 |
radius | "none" "small" "medium" "large" "full" | 테마 값 | 모서리 둥글기 |
high_contrast | True / False | False | 배경과의 대비를 더 크게 |
loading | True / False | False | 스피너를 보이고 누르지 못하게 |
disabled | True / False | False | 누르지 못하게 |
강조가 강한 것부터 약한 순서입니다. 한 화면의 주된 동작 하나에만 강한 variant를 쓰면, 사용자가 무엇을 눌러야 할지 바로 압니다.
rx.flex(
rx.button("classic", variant="classic"),
rx.button("solid", variant="solid"),
rx.button("soft", variant="soft"),
rx.button("surface", variant="surface"),
rx.button("outline", variant="outline"),
rx.button("ghost", variant="ghost"),
spacing="3",
wrap="wrap",
)자식으로 rx.icon을 넣으면 글자 옆에 아이콘이 붙습니다. 아이콘만 있는 버튼은 rx.icon_button을 쓰고, 화면 읽기 프로그램을 위해 aria_label로 이름을 붙입니다.
rx.flex(
rx.button(rx.icon("download"), "Download"),
rx.button("Next", rx.icon("arrow-right"), variant="soft"),
rx.icon_button(rx.icon("heart"), variant="outline", aria_label="Like"),
spacing="3",
align="center",
)버튼의 핵심은 on_click입니다. State의 이벤트 핸들러를 연결하면, 누를 때마다 서버의 값이 바뀌고 화면이 따라 바뀝니다. 글자와 State 값을 섞어 자식으로 넘길 수도 있습니다.
class ButtonCountState(rx.State):
count: int = 0
@rx.event
def increment(self):
self.count += 1
@rx.event
def reset_count(self):
self.count = 0
rx.flex(
rx.button("Clicked ", ButtonCountState.count, " times", on_click=ButtonCountState.increment),
rx.button("Reset", on_click=ButtonCountState.reset_count, variant="soft", color_scheme="gray"),
spacing="3",
)주된 동작인 '구매'는 solid, 되돌리는 '취소'는 soft와 회색으로 힘을 뺍니다.
rx.flex(
rx.button("Cancel", variant="soft", color_scheme="gray"),
rx.button(rx.icon("shopping-cart"), "Buy now"),
spacing="3",
justify="end",
)공방 노트
rx.button("글자")로 만들고, on_click에 이벤트 핸들러를 연결한다.
variant: classic · solid · soft · surface · outline · ghost. 주된 동작 하나에만 강하게.
size는 "1"~"4", color_scheme은 의미 있는 색, loading·disabled로 누르지 못하게.
아이콘은 자식으로 rx.icon, 아이콘만 있는 버튼은 rx.icon_button + aria_label.
폼 안에서 제출 버튼으로 쓰려면 type="submit" (Form 페이지에서 다룬다).
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.