컴포넌트 공방: 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
Reflex 공식 라이브러리의 컴포넌트 100개를 한 페이지에 하나씩. 속성을 직접 바꾸면 화면과 Python 코드가 함께 바뀌는 실습대로 익히는 컴포넌트 도감
Reflex 공식 라이브러리에는 버튼부터 차트, 데이터 표, 대화상자까지 100개의 컴포넌트가 있습니다. 이 강의는 그 100개를 한 페이지에 하나씩 다루는 컴포넌트 도감입니다.
당신은 오늘부터 "컴포넌트 공방"의 견습생입니다. 공방에는 화면 부품 주문이 들어오고, 페이지마다 주문서 한 장이 붙어 있습니다. 그 컴포넌트를 배우고 나면 주문서의 부품을 직접 만들어 볼 수 있습니다.
100 parts, one page each
rx.card(
rx.flex(
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.box(
rx.heading("Component Workshop", size="3"),
rx.text("100 parts, one page each", size="2", color_scheme="gray"),
),
rx.spacer(),
rx.button(rx.icon("hammer"), "Start", size="2"),
spacing="3",
align="center",
),
width="100%",
)rx. 이름들과 공식 문서 링크.공방 주문서
예: '결제 화면에 눈에 띄는 구매 버튼 하나와 덜 중요한 취소 버튼 하나.' 이런 주문이 페이지마다 하나씩 붙어 있습니다.
| 진열대 | 수 | 들어 있는 것 |
|---|---|---|
| 레이아웃 | 13 | Box, Flex, Stack, Grid, Container, Card … 화면의 뼈대 |
| 타이포그래피 | 10 | Text, Heading, Link, Code, Markdown … 글자 |
| 폼 | 10 | Button, Input, Checkbox, Select, Slider, Form, Upload … 입력 받기 |
| 데이터 표시 | 11 | Badge, Avatar, Icon, Callout, Progress … 정보 보여 주기 |
| 펼침과 전환 | 3 | Tabs, Accordion, Segmented Control |
| 오버레이 | 9 | Tooltip, Popover, Dialog, Drawer, Dropdown Menu, Toast … 위에 뜨는 것 |
| 동적 렌더링 | 4 | Cond, Match, Foreach, Auto Scroll: State에 따라 다른 화면 |
| 미디어 | 3 | Image, Audio, Video |
| 표와 데이터 그리드 | 3 | Table, Data Table, Data Editor |
| 차트 | 12 | Area, Bar, Line, Pie, Radar, Scatter, Sankey … (Recharts) |
| 차트 부품 | 7 | Axis, Grid, Tooltip, Legend, Label, Reference, Brush |
| 다른 차트 라이브러리 | 2 | Plotly, Pyplot |
| HTML 요소 | 7 | rx.el로 쓰는 맨 HTML 태그 |
| 그 밖의 도구 | 6 | Theme, Skeleton, Clipboard, Html Embed, Script, Memo |
순서대로 읽지 않아도 됩니다. 필요한 컴포넌트를 왼쪽 목록에서 바로 찾아 들어가세요. 처음이라면 레이아웃과 폼부터 보기를 권합니다.
공방 노트
한 페이지 = 컴포넌트 하나. 위에는 실제 화면, 아래에는 그 코드.
속성 바꿔 보기에서 값을 바꾸면 코드도 함께 바뀐다. 마음에 드는 조합을 그대로 복사해 쓰면 된다.
State가 필요한 예제는 State 클래스까지 함께 보여 준다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.