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

데이터 표시

Data List

rx.data_list.rootrx.data_list.itemrx.data_list.labelrx.data_list.value

공식 문서

공방 주문서

주문 상세 화면에 상태, 주문일, 송장 번호, 합계를 '이름: 값' 꼴로 가지런히 정리해 주세요.

rx.data_list는 이름과 값의 짝을 줄지어 보여 줍니다. 사용자 정보, 주문 상세, 파일 속성처럼 메타데이터를 정리할 때 알맞습니다. rx.data_list.root 안에 rx.data_list.item을 넣고, 각 항목에 label(이름)과 value(값)를 하나씩 둡니다.

Status: Authorized
ID: U-474747

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status"),
        rx.data_list.value("Authorized"),
    ),
    rx.data_list.item(
        rx.data_list.label("ID"),
        rx.data_list.value("U-474747"),
    ),
)

속성 바꿔 보기

orientation·size·trim은 root에, align은 item에, color_scheme은 label에 줍니다.

속성 바꿔 보기

Status: Authorized
Name: Developer Success
Email: success@reflex.dev

orientation

size

trim

align

label_color

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status", color_scheme="gray"),
        rx.data_list.value(rx.badge("Authorized", radius="full")),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Name", color_scheme="gray"),
        rx.data_list.value("Developer Success"),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Email", color_scheme="gray"),
        rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        align="center",
    ),
    orientation="horizontal",
    size="2",
    trim="normal",
)

orientation을 vertical로 바꾸면 이름이 값 위로 올라갑니다. align은 항목 안에서 이름과 값의 세로 정렬입니다.

부품	속성	값	쓰임
`root`	`orientation`	`"horizontal"`(기본) `"vertical"`	이름과 값을 옆으로 둘지, 위아래로 둘지
`root`	`size`	`"1"` `"2"`(기본) `"3"`	글자 크기와 줄 간격
`root`	`trim`	`"normal"` `"start"` `"end"` `"both"`	첫 줄 위·끝 줄 아래의 글자 여백 다듬기
`item`	`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	이름과 값의 세로 정렬
`label`	`width` `min_width` `max_width`	CSS 길이	이름 칸의 너비
`label`	`color_scheme`	Radix 색 이름	이름 글자의 색
`value`	(없음)		아무 컴포넌트나 자식으로 받는다

값 자리에 무엇이든

value에는 글자뿐 아니라 배지, 코드, 링크 같은 컴포넌트를 넣을 수 있습니다. 공식 문서의 예제처럼 카드 안에 두면 정보 상자가 됩니다. 배지처럼 높이가 다른 값이 있으면 그 항목에 align="center"를 주어 이름과 가운데를 맞춥니다.

Status: Authorized
ID: U-474747
Name: Developer Success
Email: success@reflex.dev
Company: Reflex

rx.card(
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Authorized", variant="soft", radius="full")),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("ID"),
            rx.data_list.value(rx.code("U-474747")),
        ),
        rx.data_list.item(
            rx.data_list.label("Name"),
            rx.data_list.value("Developer Success"),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("Email"),
            rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        ),
        rx.data_list.item(
            rx.data_list.label("Company"),
            rx.data_list.value(rx.link("Reflex", href="https://reflex.dev", is_external=True)),
        ),
    ),
)

방향

orientation은 root에 줍니다. 좁은 화면에서는 위아래(vertical)가 읽기 쉽습니다. 세 번째처럼 화면 너비마다 다른 값을 줄 수도 있습니다(좁으면 vertical, sm 이상이면 horizontal).

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

rx.flex(
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="horizontal",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="vertical",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation={"initial": "vertical", "sm": "horizontal"},
    ),
    spacing="6",
    wrap="wrap",
)

이름 칸 다듬기

label의 width로 이름 칸 너비를 고정하면 여러 목록의 값이 같은 선에서 시작합니다. color_scheme은 이름 글자의 색을 바꿉니다.

Owner: Ada Lovelace
Repository: reflex-dev/reflex

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Owner", width="80px", color_scheme="indigo"),
        rx.data_list.value("Ada Lovelace"),
    ),
    rx.data_list.item(
        rx.data_list.label("Repository", width="80px", color_scheme="indigo"),
        rx.data_list.value("reflex-dev/reflex"),
    ),
)

데이터로 항목 만들기

항목이 데이터에 있으면 rx.foreach로 한 줄씩 만듭니다. 공식 문서의 속성 미리보기도 이 방식을 씁니다.

Status: Authorized
ID: U-474747
Name: Developer Success
Email: foo@reflex.dev

class DataListUserState(rx.State):
    fields: list[list[str]] = [
        ["Status", "Authorized"],
        ["ID", "U-474747"],
        ["Name", "Developer Success"],
        ["Email", "foo@reflex.dev"],
    ]


rx.data_list.root(
    rx.foreach(
        DataListUserState.fields,
        lambda f: rx.data_list.item(rx.data_list.label(f[0]), rx.data_list.value(f[1])),
    ),
)

주문서 완성

주문 번호를 제목으로 두고, 상태는 배지로, 송장 번호는 코드로, 합계는 굵게 보여 줍니다.

Order #1024

Status: Shipped
Placed: 2026-10-20
Tracking: 1Z999AA10123456784
Total: $48.00

rx.card(
    rx.heading("Order #1024", size="4", margin_bottom="3"),
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Shipped", color_scheme="green", radius="full")),
            align="center",
        ),
        rx.data_list.item(rx.data_list.label("Placed"), rx.data_list.value("2026-10-20")),
        rx.data_list.item(rx.data_list.label("Tracking"), rx.data_list.value(rx.code("1Z999AA10123456784"))),
        rx.data_list.item(rx.data_list.label("Total"), rx.data_list.value(rx.text("$48.00", weight="bold"))),
    ),
    max_width="420px",
)

공방 노트

data_list.root > data_list.item > (data_list.label, data_list.value) 구조.
root: orientation · size · trim, item: align, label: width · color_scheme.
value에는 배지·코드·링크 등 아무 컴포넌트나 넣는다.
데이터가 리스트면 rx.foreach로 item을 만든다.

← 이전

데이터 표시 · List

데이터 표시 · Code Block

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex