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

오버레이

Dialog

rx.dialog.rootrx.dialog.triggerrx.dialog.contentrx.dialog.titlerx.dialog.descriptionrx.dialog.close

공식 문서

공방 주문서

회원 카드의 '프로필 편집' 버튼을 누르면 화면 가운데에 창이 떠서 이름과 이메일을 고치고 저장할 수 있게 해 주세요.

rx.dialog는 화면 가운데에 뜨는 모달 창입니다. 열려 있는 동안 뒤 화면은 어두워지고 누를 수 없어서, 사용자가 창 안의 일에 집중합니다. 정보 수정, 새 항목 추가처럼 한 번에 끝내야 하는 작은 작업에 씁니다. 여섯 부품으로 만듭니다.

dialog.root: 대화상자의 모든 부품을 감쌉니다.
dialog.trigger: 누르면 대화상자를 여는 요소를 감쌉니다.
dialog.content: 창에 들어갈 내용입니다.
dialog.title: 창의 제목입니다. 열릴 때 화면 읽기 프로그램이 읽어 줍니다.
dialog.description: 창의 설명입니다. 열릴 때 함께 읽힙니다.
dialog.close: 누르면 창을 닫는 요소를 감쌉니다.

rx.dialog.root(
    rx.dialog.trigger(rx.button("Open Dialog")),
    rx.dialog.content(
        rx.dialog.title("Welcome to Reflex!"),
        rx.dialog.description(
            "This is a dialog component. You can render anything you want in here.",
        ),
        rx.dialog.close(
            rx.button("Close Dialog", size="3"),
        ),
    ),
)

속성 바꿔 보기

창의 크기는 dialog.content의 size(안쪽 여백)와 max_width(최대 너비)로 정합니다. 값을 바꾼 뒤 창을 열어 봅니다.

속성 바꿔 보기

title

description

size

max_width

rx.dialog.root(
    rx.dialog.trigger(rx.button("Open dialog")),
    rx.dialog.content(
        rx.dialog.title("Invite teammates"),
        rx.dialog.description("They will get an email with a link."),
        rx.flex(
            rx.dialog.close(rx.button("Close", variant="soft", color_scheme="gray")),
            justify="end",
            margin_top="16px",
        ),
        size="3",
        max_width="450px",
    ),
)

size는 여백과 모서리 크기를 함께 바꿉니다. 너비는 max_width 같은 스타일 속성으로 정합니다.

부품	속성	값	쓰임
`root`	`open`	`True` / `False`	열림을 State로 정하기(제어). `on_open_change`와 함께
`root`	`default_open`	`True` / `False`	처음 그릴 때 열어 두기(비제어)
`root`	`on_open_change`	이벤트	열리거나 닫힐 때. 새 열림 값(bool)을 넘긴다
`content`	`size`	`"1"` ~ `"4"`	여백과 모서리 크기
`content`	`on_open_auto_focus` · `on_close_auto_focus`	이벤트	열리며 창 안에, 닫히며 트리거에 초점이 갈 때
`content`	`on_escape_key_down`	이벤트	Esc 키를 눌렀을 때
`content`	`on_pointer_down_outside` · `on_interact_outside`	이벤트	창 바깥을 누르거나 조작했을 때

trigger, title, description, close에는 공통 이벤트만 있습니다. Esc 키나 창 바깥 누르기로도 닫힙니다.

실제 쓰임새: 입력칸이 있는 창

창 안에 입력칸을 두고, 아래에 취소와 저장 버튼을 나란히 놓은 프로필 편집 창입니다. 두 버튼 모두 dialog.close로 감쌌기 때문에 누르면 창이 닫힙니다. 값을 실제로 저장하는 방법은 아래 '폼 제출하기'와 주문서에서 다룹니다.

rx.dialog.root(
    rx.dialog.trigger(rx.button("Edit Profile", size="4")),
    rx.dialog.content(
        rx.dialog.title("Edit Profile"),
        rx.dialog.description(
            "Change your profile details and preferences.",
            size="2",
            margin_bottom="16px",
        ),
        rx.flex(
            rx.text("Name", as_="div", size="2", margin_bottom="4px", weight="bold"),
            rx.input(default_value="Freja Johnson", placeholder="Enter your name"),
            rx.text("Email", as_="div", size="2", margin_bottom="4px", weight="bold"),
            rx.input(default_value="freja@example.com", placeholder="Enter your email"),
            direction="column",
            spacing="3",
        ),
        rx.flex(
            rx.dialog.close(
                rx.button("Cancel", color_scheme="gray", variant="soft"),
            ),
            rx.dialog.close(
                rx.button("Save"),
            ),
            spacing="3",
            margin_top="16px",
            justify="end",
        ),
    ),
)

rx.inset(side="x")으로 감싸면 표 같은 내용을 창의 양옆 가장자리까지 붙일 수 있습니다.

rx.dialog.root(
    rx.dialog.trigger(rx.button("View users", size="4")),
    rx.dialog.content(
        rx.dialog.title("Users"),
        rx.dialog.description("The following users have access to this project."),
        rx.inset(
            rx.table.root(
                rx.table.header(
                    rx.table.row(
                        rx.table.column_header_cell("Full Name"),
                        rx.table.column_header_cell("Email"),
                        rx.table.column_header_cell("Group"),
                    ),
                ),
                rx.table.body(
                    rx.table.row(
                        rx.table.row_header_cell("Danilo Rosa"),
                        rx.table.cell("danilo@example.com"),
                        rx.table.cell("Developer"),
                    ),
                    rx.table.row(
                        rx.table.row_header_cell("Zahra Ambessa"),
                        rx.table.cell("zahra@example.com"),
                        rx.table.cell("Admin"),
                    ),
                ),
            ),
            side="x",
            margin_top="24px",
            margin_bottom="24px",
        ),
        rx.flex(
            rx.dialog.close(
                rx.button("Close", variant="soft", color_scheme="gray"),
            ),
            spacing="3",
            justify="end",
        ),
    ),
)

열리고 닫힐 때: on_open_change

dialog.root의 on_open_change는 열릴 때 True, 닫힐 때 False를 넘깁니다. 열린 횟수를 세거나, 창이 닫힐 때 입력값을 정리하는 데 씁니다.

Opened or closed: 0 times

Dialog open: no

class DialogEventState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


rx.flex(
    rx.text("Opened or closed: ", DialogEventState.num_opens, " times"),
    rx.text("Dialog open: ", rx.cond(DialogEventState.opened, "yes", "no")),
    rx.dialog.root(
        rx.dialog.trigger(rx.button("Open Dialog")),
        rx.dialog.content(
            rx.dialog.title("Welcome to Reflex!"),
            rx.dialog.description(
                "This is a dialog component. You can render anything you want in here.",
            ),
            rx.dialog.close(
                rx.button("Close Dialog", size="3"),
            ),
        ),
        on_open_change=DialogEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

State로 열고 닫기

open에 State 값을 연결하면 dialog.trigger 없이도 코드로 창을 열 수 있습니다. 아래에서는 두 버튼이 각자 다른 값을 넣고 창을 엽니다. on_open_change를 함께 연결해 두면 Esc 키나 바깥 누르기로 닫혔을 때도 State가 따라옵니다.

드롭다운 메뉴의 항목에서 대화상자를 여는 방법은 Dropdown Menu 페이지에서 다룹니다.

class DialogControlState(rx.State):
    open: bool = False
    seconds: int = 0

    @rx.event
    def set_open(self, value: bool):
        self.open = value

    @rx.event
    def start(self, seconds: int):
        self.seconds = seconds
        self.open = True

    @rx.event
    def confirm(self):
        self.open = False


rx.flex(
    rx.button("Break: 5 min", variant="soft", on_click=DialogControlState.start(5)),
    rx.button("Break: 15 min", variant="soft", on_click=DialogControlState.start(15)),
    rx.dialog.root(
        rx.dialog.content(
            rx.dialog.title("Take a break"),
            rx.dialog.description("Stand up and stretch for ", DialogControlState.seconds, " minutes."),
            rx.flex(rx.button("OK", on_click=DialogControlState.confirm), justify="end", margin_top="16px"),
            max_width="380px",
        ),
        open=DialogControlState.open,
        on_open_change=DialogControlState.set_open,
    ),
    spacing="3",
    wrap="wrap",
)

폼 제출하기

창 안에 rx.form을 두면 입력값을 한 번에 받을 수 있습니다. 제출 버튼을 dialog.close로 감싸면, 제출과 동시에 창이 닫힙니다. 핸들러는 name을 키로 하는 dict를 받아 알림(toast)을 띄웁니다.

class DialogFormState(rx.State):
    current_user: dict[str, str] = {}

    @rx.event
    def add_user(self, form_data: dict):
        self.current_user = form_data
        # Here you would save the user to a database (see the Database course).
        return rx.toast.info(
            f"User {form_data.get('name', '')} has been added.", position="bottom-right"
        )


rx.dialog.root(
    rx.dialog.trigger(
        rx.button(rx.icon("plus", size=26), rx.text("Add User", size="4")),
    ),
    rx.dialog.content(
        rx.dialog.title("Add New User"),
        rx.dialog.description("Fill the form with the user's info"),
        rx.form(
            rx.flex(
                rx.input(placeholder="User Name", name="name"),
                rx.input(placeholder="user@reflex.dev", name="email"),
                rx.flex(
                    rx.dialog.close(
                        rx.button("Cancel", variant="soft", color_scheme="gray"),
                    ),
                    rx.dialog.close(
                        rx.button("Submit", type="submit"),
                    ),
                    spacing="3",
                    justify="end",
                ),
                direction="column",
                spacing="4",
            ),
            on_submit=DialogFormState.add_user,
            reset_on_submit=False,
        ),
        max_width="450px",
    ),
)

공식 문서의 예제는 같은 자리에서 데이터베이스에 저장합니다. 그 부분만 떼어 보면 다음과 같습니다(이 페이지에서는 실행하지 않습니다).

from sqlmodel import select


class User(rx.Model, table=True):
    name: str
    email: str


@rx.event
def add_user_to_db(self, form_data: dict):
    with rx.session() as session:
        if session.exec(select(User).where(User.email == form_data["email"])).first():
            return rx.window_alert("User with this email already exists")
        session.add(User(**form_data))
        session.commit()
    return rx.toast.info(f"User {form_data['name']} has been added.")

주문서 완성

이번에는 창을 State로 제어합니다. 저장 버튼은 dialog.close로 감싸지 않고, 제출 핸들러가 값을 저장한 뒤 self.open = False로 창을 닫습니다. 그래서 저장이 끝난 다음에만 창이 닫힙니다. 입력칸은 default_value로 지금 값을 채워 둡니다.

Freja Johnson

freja@example.com

class DialogProfileState(rx.State):
    open: bool = False
    name: str = "Freja Johnson"
    email: str = "freja@example.com"

    @rx.event
    def set_open(self, value: bool):
        self.open = value

    @rx.event
    def save(self, form_data: dict):
        self.name = form_data.get("name", "").strip() or self.name
        self.email = form_data.get("email", "").strip() or self.email
        self.open = False
        return rx.toast.success("Profile saved")


rx.card(
    rx.flex(
        rx.avatar(fallback="FJ", radius="full"),
        rx.box(
            rx.text(DialogProfileState.name, weight="bold"),
            rx.text(DialogProfileState.email, size="2", color_scheme="gray"),
        ),
        rx.spacer(),
        rx.dialog.root(
            rx.dialog.trigger(rx.button(rx.icon("pencil"), "Edit profile", variant="soft", size="2")),
            rx.dialog.content(
                rx.dialog.title("Edit profile"),
                rx.dialog.description("Change your name and email.", size="2", margin_bottom="12px"),
                rx.form(
                    rx.flex(
                        rx.input(name="name", default_value=DialogProfileState.name, placeholder="Name"),
                        rx.input(name="email", default_value=DialogProfileState.email, placeholder="Email", type="email"),
                        rx.flex(
                            rx.dialog.close(rx.button("Cancel", variant="soft", color_scheme="gray", type="button")),
                            rx.button("Save", type="submit"),
                            spacing="3",
                            justify="end",
                        ),
                        direction="column",
                        spacing="3",
                    ),
                    on_submit=DialogProfileState.save,
                ),
                max_width="420px",
            ),
            open=DialogProfileState.open,
            on_open_change=DialogProfileState.set_open,
        ),
        spacing="3",
        align="center",
    ),
    max_width="460px",
)

공방 노트

root · trigger · content · title · description · close. title은 꼭 넣는다(화면 읽기 프로그램이 읽는다).
크기는 content의 size("1"~"4")와 max_width, 가장자리까지 붙일 내용은 rx.inset.
on_open_change는 새 열림 값(bool)을 넘긴다. open으로 제어하면 trigger 없이도 연다.
폼은 rx.form + on_submit. 제출하며 닫으려면 close로 감싸거나, 핸들러에서 open을 False로.
확인/취소처럼 반드시 답을 받아야 하는 창은 Alert Dialog를 쓴다.

← 이전

오버레이 · Hover Card

오버레이 · Alert Dialog

새 교시·새 강의 소식 받기

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