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

레이아웃

Fragment

rx.fragment

공식 문서

공방 주문서

Grid 칸에 카드를 바로 넣어야 하는데, 조건에 따라 카드 두 장을 한꺼번에 넣거나 빼고 싶어요.

rx.fragment는 여러 컴포넌트를 하나로 묶되, 화면에는 감싸는 요소를 남기지 않습니다. React의 Fragment와 같습니다. 문법상 컴포넌트 하나만 들어갈 자리(rx.cond의 한 갈래, rx.foreach가 돌려주는 값, 함수의 반환값)에 여러 개를 넣고 싶을 때 씁니다. 감싸는 div가 없으니 바깥 Flex·Grid의 짜임새가 깨지지 않습니다.

Component1

Component2

rx.fragment(rx.text("Component1"), rx.text("Component2"))

State로 움직여 보기

Fragment는 눈에 보이는 속성이 없으므로, 실습대 대신 State로 움직여 봅니다. rx.cond의 한 갈래에는 컴포넌트 하나만 들어가므로, 카드 두 장을 Fragment로 묶어 함께 넣고 뺍니다. 두 카드는 Grid의 칸에 바로 들어갑니다.

Show cards 4 and 5

Card 1

Card 2

Card 3

class FragmentExtraState(rx.State):
    show_extra: bool = False

    @rx.event
    def set_show_extra(self, value: bool):
        self.show_extra = value


rx.vstack(
    rx.hstack(
        rx.switch(checked=FragmentExtraState.show_extra, on_change=FragmentExtraState.set_show_extra),
        rx.text("Show cards 4 and 5"),
        align="center",
    ),
    rx.grid(
        rx.card("Card 1"),
        rx.card("Card 2"),
        rx.card("Card 3"),
        rx.cond(
            FragmentExtraState.show_extra,
            rx.fragment(rx.card("Card 4"), rx.card("Card 5")),
        ),
        columns="3",
        spacing="2",
        width="100%",
    ),
    width="100%",
)

속성	값	기본값	쓰임
`*children`	컴포넌트 여러 개	없음	묶을 자식들. 감싸는 요소 없이 그대로 그려진다

Fragment는 화면에 남는 요소가 없어서 스타일(width, padding …)이나 on_click 같은 이벤트를 줄 곳이 없습니다. 넘겨도 효과가 없고 React가 경고를 냅니다. 스타일이 필요하면 rx.box로 감쌉니다.

Box로 감쌀 때와 비교

두 Grid 모두 카드 2·3을 하나로 묶었습니다. 왼쪽은 Fragment라서 2와 3이 각자 한 칸씩 차지합니다. 오른쪽은 Box라서 2와 3이 한 칸 안에 위아래로 쌓이고, 4의 자리도 달라집니다.

rx.flex(
    rx.grid(
        rx.card("1"),
        rx.fragment(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("1"),
        rx.box(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    justify="between",
    align="start",
    width="100%",
)

foreach와 함수에서 여러 개 돌려주기

rx.foreach의 함수는 항목마다 컴포넌트 하나를 돌려줘야 합니다. 이름과 가격처럼 두 칸을 돌려주고 싶으면 Fragment로 묶습니다. 그러면 바깥 columns="2" Grid가 이름은 왼쪽 칸에, 가격은 오른쪽 칸에 차례로 놓아 표처럼 맞춰집니다.

Coffee

Tea

Cake

class FragmentMenuState(rx.State):
    items: list[list[str]] = [["Coffee", "$3"], ["Tea", "$2"], ["Cake", "$5"]]


def fragment_menu_row(row):
    return rx.fragment(
        rx.text(row[0]),
        rx.text(row[1], text_align="right", weight="bold"),
    )


rx.grid(
    rx.foreach(FragmentMenuState.items, fragment_menu_row),
    columns="2",
    spacing_y="2",
    width="200px",
)

주문서 완성

회원이면 카드 두 장을 더 보여 주고, 아니면 안내 카드 한 장을 두 칸에 걸쳐 놓습니다. rx.cond의 첫 갈래가 Fragment라서 두 카드가 Grid의 칸에 바로 들어갑니다.

Mug

Plate

Gold mug

Gold plate

class FragmentOrderState(rx.State):
    members_only: bool = True

    @rx.event
    def toggle_members(self):
        self.members_only = not self.members_only


rx.vstack(
    rx.button(
        rx.cond(FragmentOrderState.members_only, "Show public view", "Show member view"),
        on_click=FragmentOrderState.toggle_members,
        variant="soft",
    ),
    rx.grid(
        rx.card("Mug"),
        rx.card("Plate"),
        rx.cond(
            FragmentOrderState.members_only,
            rx.fragment(rx.card("Gold mug"), rx.card("Gold plate")),
            rx.card("Members get two more items", grid_column="span 2"),
        ),
        columns="2",
        spacing="2",
        width="100%",
        max_width="320px",
    ),
)

공방 노트

rx.fragment(a, b)는 감싸는 요소 없이 여러 컴포넌트를 하나로 묶는다.
rx.cond의 한 갈래, rx.foreach의 반환값, 함수의 반환값에 여러 개를 넣을 때 쓴다.
감싸는 div가 없어 바깥 Flex·Grid의 칸 배치가 그대로 유지된다.
남는 요소가 없으니 스타일·이벤트는 줄 수 없다. 필요하면 rx.box.

← 이전

레이아웃 · Aspect Ratio

타이포그래피 · Text

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex