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 Embed

rx.html

공식 문서

공방 주문서

본사 시스템에서 HTML 조각으로 내려오는 매장 공지를 고치지 않고 그대로, 그래도 보기 좋게 보여 주세요.

rx.html은 HTML 코드 문자열을 받아 그대로 그립니다. 다른 곳(CMS, 이메일 본문, 마크다운 변환기)에서 이미 HTML로 만들어진 조각을 보여 줄 때 씁니다. 직접 화면을 짤 때는 rx.html보다 rx.el.* 요소를 쓰는 편이 낫다고 공식 문서도 권합니다. 이벤트와 State를 붙일 수 있기 때문입니다.

Hello from raw HTML.

rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>")

속성 바꿔 보기

rx.html은 <div> 하나를 만들고 그 안에 HTML을 넣습니다. 그래서 font_size, color 같은 스타일은 바깥 div에 들어가 안의 글자가 물려받습니다.

속성 바꿔 보기

Bold and italic

snippet

size

color

rx.html("<b>Bold</b> and <i>italic</i>", font_size="18px", color="inherit")

HTML 조각과 바깥 div의 스타일을 바꿔 봅니다. ul의 기호가 보이지 않는 것은 이 사이트의 preflight 때문입니다.

속성	값	기본값	쓰임
첫 번째 자식	HTML 문자열 또는 문자열 Var	꼭 있어야 함	그릴 HTML. 정확히 하나만 받는다
`class_name`	클래스 문자열	`"rx-Html"`이 늘 붙는다	바깥 `div`의 클래스
스타일 속성·`style`	CSS, `"& h2"` 같은 중첩 선택자	없음	바깥 `div`와 그 안 요소의 스타일
`dangerouslySetInnerHTML`	`{"__html": ...}`	자식에서 자동으로	내부 구현. 직접 줄 일은 없다
공통 속성	`id` `title` `role` …	없음	`div`의 HTML 속성

제목 다섯 개, 모양은 하나

공식 문서의 예제입니다. 이 사이트에서는 다섯 제목이 모두 같은 크기로 보입니다. Radix와 Tailwind가 제목의 기본 스타일을 지워 두었기 때문입니다.

Hello World

rx.vstack(
    rx.html("<h2>Hello World</h2>"),
    rx.html("<h3>Hello World</h3>"),
    rx.html("<h4>Hello World</h4>"),
    rx.html("<h5>Hello World</h5>"),
    rx.html("<h6>Hello World</h6>"),
)

스타일이 사라졌다면

공식 문서는 class_name="prose"와 Tailwind의 @tailwindcss/typography 플러그인을 권합니다. 이 사이트에는 그 플러그인이 없어서 코드로만 보입니다.

# The official docs' way: the prose class from the Tailwind typography plugin
rx.html("<h2>Hello World</h2>", class_name="prose")
# + enable the @tailwindcss/typography plugin in rxconfig.py's Tailwind settings (not on this site)

플러그인 없이도 style에 "& h2"처럼 중첩 선택자를 주면, 안쪽 HTML의 요소마다 스타일을 줄 수 있습니다.

Hello World

rx.html(
    "<h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>",
    style={
        "& h2": {"font_size": "24px", "font_weight": "bold"},
        "& h3": {"font_size": "20px", "font_weight": "bold"},
        "& h4": {"font_size": "16px", "font_weight": "600", "color": rx.color("gray", 11)},
    },
)

그림 넣기

<img> 태그도 그대로 들어갑니다. 공식 문서는 Reflex 배너 그림을 쓰지만, 이 강의는 외부 자원을 picsum 그림으로 통일했습니다.

rx.html(
    "<img src='https://picsum.photos/id/1039/400/160' alt='A waterfall' style='border-radius: 8px' />"
)

State로 만든 HTML과 이스케이프

자식으로 문자열 Var를 주면 State가 바뀔 때마다 HTML도 바뀝니다. 이때 사용자가 입력한 글을 그대로 끼우면 안 됩니다. html.escape로 <, >를 바꿔 두면 태그가 아니라 글자로 보입니다. 아래 입력칸의 가 굵은 글씨가 되지 않고 글자 그대로 보이는 것을 확인합니다. rx.html이 넣은 <script> 태그는 이스케이프하지 않아도 브라우저가 실행하지 않지만, onerror 같은 속성은 실행되므로 이스케이프가 필요합니다.

Welcome, Ada!

Welcome, Ada!

import html


class HtmlEmbedPreviewState(rx.State):
    name: str = "<b>Ada</b>"

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

    @rx.var
    def card_html(self) -> str:
        safe = html.escape(self.name)
        return f"<p>Welcome, <mark>{safe}</mark>!</p>"


rx.vstack(
    rx.input(value=HtmlEmbedPreviewState.name, on_change=HtmlEmbedPreviewState.change_name, width="100%"),
    rx.html(HtmlEmbedPreviewState.card_html),
    rx.code(HtmlEmbedPreviewState.card_html, size="1"),
    width="100%",
    max_width="420px",
)

rx.el로 쓰면

내용을 직접 짤 수 있다면 같은 화면을 rx.el 요소로 만드는 편이 낫습니다. 각 요소에 on_click과 State를 붙일 수 있고, 이스케이프도 Reflex가 알아서 합니다.

Hello from raw HTML.

Hello from rx.el elements.

rx.flex(
    rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>"),
    rx.el.p("Hello from ", rx.el.b("rx.el"), " ", rx.el.i("elements"), "."),
    direction="column",
    spacing="2",
)

주문서 완성

공지 HTML은 한 글자도 고치지 않고, 바깥에서 "& h3", "& ul", "& a" 선택자로 제목 크기, 목록 기호, 링크 색만 입혔습니다.

Store hours change

From Nov 1 we open at 8 am.

Mon to Fri: 8 am - 8 pm
Sat: 9 am - 5 pm

rx.card(
    rx.html(
        "<h3>Store hours change</h3>"
        "<p>From <b>Nov 1</b> we open at <mark>8 am</mark>.</p>"
        "<ul><li>Mon to Fri: 8 am - 8 pm</li><li>Sat: 9 am - 5 pm</li></ul>"
        "<p><a href='https://reflex.dev/docs/library/other/html-embed/' target='_blank'>Read more</a></p>",
        style={
            "& h3": {"font_size": "18px", "font_weight": "bold", "margin_bottom": "6px"},
            "& ul": {"list_style_type": "disc", "padding_left": "1.4em", "margin_y": "6px"},
            "& a": {"color": rx.color("indigo", 11), "text_decoration": "underline"},
        },
    ),
    max_width="420px",
)

공방 노트

rx.html("...")는 div 하나 안에 HTML 문자열을 그대로 넣는다. 자식은 정확히 하나.
직접 짜는 화면이면 rx.el.* 요소가 낫다. rx.html은 이미 HTML인 조각용.
제목·목록의 기본 스타일은 지워져 있다. prose 클래스나 "& h2" 같은 중첩 선택자로 입힌다.
사용자 입력은 html.escape로 이스케이프한 뒤 끼운다.

← 이전

그 밖의 도구 · Clipboard

그 밖의 도구 · Script

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex