ReflexKR

컴포넌트 공방: 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

HTML 요소

HTML

rx.el.buttonrx.el.divrx.el.inputrx.el.prx.el.spanrx.el.a

공식 문서

공방 주문서

디자인 시스템 없이 맨 HTML로, 닫기 버튼과 링크가 달린 작은 공지 카드를 직접 꾸며 주세요.

rx.el에는 웹 개발에서 쓰는 HTML 요소가 그대로 들어 있습니다. rx.el.div는 <div>, rx.el.button은 <button>이 됩니다. Radix 기반의 rx.button과 달리 variant·size 같은 모양 속성이 없고, 스타일이 전혀 없는 상태로 나옵니다. 이 사이트는 Tailwind의 기본 초기화(preflight)가 켜져 있어서, 버튼의 테두리와 입력칸의 선까지 지워져 보입니다.

A plain paragraph.

rx.el.div(
    rx.el.p("A plain paragraph."),
    rx.el.button("A plain button"),
    rx.el.input(placeholder="A plain input"),
)

속성 바꿔 보기

모양은 스타일 속성(CSS 속성 이름을 밑줄로 쓴 키워드)으로 직접 입힙니다. 값을 바꾸면 맨 버튼이 어떻게 달라지는지 봅니다.

속성 바꿔 보기

label

background

color

padding

radius

weight

disabled

rx.el.button(
    "Buy now",
    background="#4f46e5",
    color="white",
    padding="8px 16px",
    border_radius="6px",
    font_weight="600",
    disabled=False,
    cursor="pointer",
)

rx.el 요소에는 variant가 없습니다. background, padding, border_radius 같은 CSS 속성이 곧 디자인입니다.

속성	값	기본값	쓰임
CSS 속성(`padding`, `color` …)	CSS 값	없음	키워드로 바로 스타일을 입힌다
`class_name`	클래스 문자열	없음	Tailwind 같은 CSS 클래스
`id` `title` `hidden` `role` `tab_index` `lang` `dir`	문자열·bool·int	없음	모든 요소에 공통인 HTML 속성
`custom_attrs`	dict	없음	`aria-`, `data-`처럼 이름에 `-`가 있는 속성
`type` (button)	`"submit"` `"reset"` `"button"`	브라우저: `"submit"`	폼 안에서 누를 때 할 일
`type` (input)	`"text"` `"email"` `"range"` `"date"` … 22가지	`"text"`	입력칸의 종류
`value` / `on_change` (input)	문자열·숫자 / 이벤트	없음	제어 입력칸. `default_value`는 비제어
`href` `target` (a)	URL / `"_blank"` …	없음	링크 주소와 여는 곳
`on_click` `on_key_down` …	이벤트 핸들러	없음	모든 요소의 기본 이벤트

스타일을 입히는 세 가지 방법

키워드 스타일 속성, style 딕셔너리, class_name의 CSS 클래스입니다. 셋을 섞어 써도 됩니다. rx.color("indigo", 3)처럼 테마 색을 쓰면 어두운 모드에서도 색이 알맞게 바뀝니다.

Style props

style dict

Tailwind classes

rx.el.div(
    rx.el.div(
        "Style props",
        padding="12px",
        border=f"1px solid {rx.color('indigo', 7)}",
        border_radius="8px",
        background=rx.color("indigo", 3),
    ),
    rx.el.div(
        "style dict",
        style={"padding": "12px", "border": "1px dashed gray", "border_radius": "8px"},
    ),
    rx.el.div(
        "Tailwind classes",
        class_name="p-3 rounded-lg border-2 border-dotted font-semibold",
    ),
    display="flex",
    gap="12px",
    flex_wrap="wrap",
)

모든 요소의 공통 속성

title은 마우스를 올리면 뜨는 기본 말풍선, hidden은 숨김, dir은 글 방향, tab_index는 Tab 키 순서입니다. aria-label이나 data-kind처럼 이름에 하이픈이 있는 속성은 custom_attrs로 넘깁니다.

Hover me

Right to left

Focus me with Tab

rx.el.div(
    rx.el.span("Hover me", title="A native tooltip", text_decoration="underline dotted"),
    rx.el.span("You cannot see me", hidden=True),
    rx.el.p("Right to left", dir="rtl", lang="en"),
    rx.el.div(
        "Focus me with Tab",
        tab_index=0,
        role="note",
        custom_attrs={"aria-label": "Demo note", "data-kind": "demo"},
        padding="8px",
        border="1px solid gray",
        border_radius="6px",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

rx.el.button

on_click으로 State를 바꾸는 것은 rx.button과 같습니다. 폼 안에 둘 때는 type이 중요합니다. 지정하지 않으면 브라우저 기본값 "submit"이라 누르는 순간 폼이 제출되므로, 일반 버튼은 type="button"으로 씁니다. name·value는 제출할 때 함께 보낼 값이고, form_action·form_method 같은 form_* 속성은 그 버튼에 한해 폼의 설정을 바꿉니다.

Count: 0

class HtmlElButtonState(rx.State):
    count: int = 0

    @rx.event
    def add_one(self):
        self.count += 1


rx.el.div(
    rx.el.button(
        "Add one",
        type="button",
        on_click=HtmlElButtonState.add_one,
        padding="6px 14px",
        border="1px solid gray",
        border_radius="6px",
        cursor="pointer",
    ),
    rx.el.button("Disabled", disabled=True, padding="6px 14px", border="1px solid gray", border_radius="6px", opacity="0.5"),
    rx.el.span("Count: ", HtmlElButtonState.count),
    display="flex",
    gap="12px",
    align_items="center",
)

rx.el.input

value와 on_change를 함께 주면 State가 입력칸을 쥐는 제어 입력칸이 됩니다. rx.el.input에는 on_change, on_key_down, on_key_up 이벤트가 따로 있습니다. on_key_down은 누른 키 이름을 넘기므로, 아래에서는 마지막으로 누른 키를 보여 줍니다. type="range"는 슬라이더가 됩니다.

Hello, (last key: )

Level: 40

class HtmlElInputState(rx.State):
    name: str = ""
    level: int = 40
    last_key: str = ""

    @rx.event
    def change_name(self, value: str):
        self.name = value

    @rx.event
    def change_level(self, value: float):
        self.level = int(value)

    @rx.event
    def remember_key(self, key: str):
        self.last_key = key


rx.el.div(
    rx.el.input(
        type="text",
        value=HtmlElInputState.name,
        on_change=HtmlElInputState.change_name,
        on_key_down=HtmlElInputState.remember_key,
        placeholder="Your name",
        max_length=20,
        padding="6px 10px",
        border="1px solid gray",
        border_radius="6px",
    ),
    rx.el.p("Hello, ", HtmlElInputState.name, " (last key: ", HtmlElInputState.last_key, ")"),
    rx.el.input(
        type="range",
        min=0,
        max=100,
        step=5,
        value=HtmlElInputState.level,
        on_change=HtmlElInputState.change_level,
    ),
    rx.el.p("Level: ", HtmlElInputState.level),
    display="flex",
    flex_direction="column",
    gap="8px",
    max_width="320px",
)

type 하나로 날짜, 색, 체크박스, 이메일, 숫자 입력칸이 됩니다. State 없이 처음 값만 주려면 default_value·default_checked를 씁니다. required, min·max, pattern, max_length 같은 검사 속성은 폼을 제출할 때 브라우저가 확인합니다.

Remember me

rx.el.div(
    rx.el.input(type="date"),
    rx.el.input(type="color", default_value="#6e56cf"),
    rx.el.label(rx.el.input(type="checkbox", default_checked=True), " Remember me"),
    rx.el.input(type="email", placeholder="you@example.com", required=True, border="1px solid gray", padding="4px 8px"),
    rx.el.input(type="number", min=1, max=9, default_value=3, border="1px solid gray", padding="4px 8px", width="80px"),
    display="flex",
    gap="12px",
    flex_wrap="wrap",
    align_items="center",
)

rx.el.p · rx.el.span · rx.el.div

p는 문단이라 한 줄을 다 차지하고, span은 글줄 안에 머무는 조각입니다. div는 의미 없는 상자로, 무엇이든 묶을 때 씁니다.

A p is a block. A span stays inside the line.

A div is a box with no meaning.

rx.el.div(
    rx.el.p(
        "A p is a block. A ",
        rx.el.span("span", color=rx.color("tomato", 11), font_weight="bold"),
        " stays inside the line.",
    ),
    rx.el.div("A div is a box with no meaning.", padding="8px", background=rx.color("gray", 3)),
)

rx.el.a

Reflex 0.10의 rx.el.a는 React Router의 Link로 그려지고, href는 내부에서 to로 옮겨집니다. 그래서 "/" 같은 사이트 안 주소는 페이지를 새로 읽지 않고 이동하며, 바깥 주소는 보통 링크처럼 열립니다. 새로 읽으며 이동하려면 reload_document=True, 방문 기록을 바꿔치려면 replace=True, 전환 효과는 view_transition=True입니다. download는 파일로 내려받게 합니다.

Reflex docs (new tab)Home page

rx.el.div(
    rx.el.a(
        "Reflex docs (new tab)",
        href="https://reflex.dev/docs/library/html/html/",
        target="_blank",
        rel="noopener noreferrer",
        color=rx.color("indigo", 11),
        text_decoration="underline",
    ),
    rx.el.a("Home page", href="/", color=rx.color("indigo", 11), text_decoration="underline"),
    display="flex",
    gap="16px",
)

rx.el의 요소는 100개가 넘습니다. 글자 요소, 문서 구조, 폼, 미디어, 표, SVG는 이어지는 다섯 페이지에서 무리별로 다룹니다.

주문서 완성

span으로 배지를, p로 본문을, a와 button으로 동작을 만들고 스타일 속성으로 모두 꾸몄습니다. 닫으면 State가 카드를 감춥니다.

NewVersion 2 is out.

Read what changed before you update.

Release notes

class HtmlElNoticeState(rx.State):
    visible: bool = True

    @rx.event
    def dismiss(self):
        self.visible = False

    @rx.event
    def show_again(self):
        self.visible = True


rx.cond(
    HtmlElNoticeState.visible,
    rx.el.div(
        rx.el.p(
            rx.el.span(
                "New",
                background=rx.color("indigo", 9),
                color="white",
                padding="2px 8px",
                border_radius="999px",
                font_size="12px",
                margin_right="8px",
            ),
            "Version 2 is out.",
            font_weight="600",
        ),
        rx.el.p("Read what changed before you update.", color=rx.color("gray", 11), margin_y="6px"),
        rx.el.div(
            rx.el.a(
                "Release notes",
                href="https://reflex.dev/docs/",
                target="_blank",
                rel="noopener noreferrer",
                color=rx.color("indigo", 11),
                text_decoration="underline",
            ),
            rx.el.button(
                "Dismiss",
                type="button",
                on_click=HtmlElNoticeState.dismiss,
                padding="4px 12px",
                border=f"1px solid {rx.color('gray', 7)}",
                border_radius="6px",
                cursor="pointer",
            ),
            display="flex",
            gap="16px",
            align_items="center",
        ),
        padding="16px",
        border=f"1px solid {rx.color('indigo', 6)}",
        border_radius="10px",
        background=rx.color("indigo", 2),
        max_width="360px",
    ),
    rx.el.button("Show again", on_click=HtmlElNoticeState.show_again, text_decoration="underline", cursor="pointer"),
)

공방 노트

rx.el.<태그>는 HTML 요소 그대로이고 스타일이 없다. 모양은 CSS 키워드 속성·style·class_name으로 입힌다.
title·hidden·dir·tab_index·role은 모든 요소 공통. aria-*·data-*는 custom_attrs로.
폼 안의 rx.el.button은 기본이 submit. 일반 버튼은 type="button".
rx.el.input은 value + on_change로 제어, default_value로 비제어. on_key_down은 누른 키를 넘긴다.
0.10의 rx.el.a는 React Router Link: href가 to가 되어 사이트 안에서는 새로 읽지 않고 이동한다.

← 이전

다른 차트 라이브러리 · Pyplot

HTML 요소 · HTML Text

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex