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

동적 렌더링

Foreach

rx.foreach

공식 문서

공방 주문서

할 일 목록을 만들어 주세요. 새 할 일을 더하고, 끝낸 일은 'Done'을 눌러 목록에서 지울 수 있어야 합니다.

rx.foreach(목록, 함수)는 State의 리스트·튜플·dict를 돌며, 항목마다 함수가 만든 컴포넌트를 늘어놓습니다. 목록이 바뀌면 화면도 바로 다시 그려집니다. 파이썬의 for는 페이지를 만들 때 한 번만 돌기 때문에 State 리스트에는 쓸 수 없습니다.

State 변수에는 rx.foreach를, 바뀌지 않는 상수에는 파이썬 리스트·dict 내포를 씁니다.

#E5484D

#12A594

#3E63DD

#AD5700

#F76B15

#8E4EC6

class ForeachColorState(rx.State):
    colors: list[str] = ["#E5484D", "#12A594", "#3E63DD", "#AD5700", "#F76B15", "#8E4EC6"]


def foreach_color_swatch(label: rx.Var[str | int], color: rx.Var[str]):
    return rx.box(
        rx.text(label, color="white", weight="medium"),
        bg=color,
        padding_y="0.5em",
        padding_x="0.75em",
        min_width="5.5em",
        text_align="center",
        border_radius="0.375rem",
    )


def foreach_colored_box(color: rx.Var[str]):
    return foreach_color_swatch(color, color)


rx.grid(
    rx.foreach(ForeachColorState.colors, foreach_colored_box),
    columns="2",
    spacing="2",
)

함수가 받는 color는 파이썬 문자열이 아니라 rx.Var[str]입니다. 그래서 그대로 자식이나 속성 값(bg=color)에 넣을 수 있고, 파이썬의 if나 문자열 메서드는 쓸 수 없습니다(조건은 rx.cond).

직접 움직여 보기

rx.foreach에는 생김새 속성이 없습니다. 대신 목록을 바꿔 보세요. 배지를 누르면 그 항목이 지워지고, Add는 새 항목을 더합니다. 이벤트에 항목 값을 넘기려면 on_click=State.remove(f)처럼 씁니다.

applebanana

2 items

FOREACH_FRUIT_POOL = ["apple", "banana", "cherry", "grape", "kiwi", "mango", "pear", "plum"]


class ForeachLiveState(rx.State):
    fruits: list[str] = ["apple", "banana"]

    @rx.event
    def add(self):
        for f in FOREACH_FRUIT_POOL:
            if f not in self.fruits:
                self.fruits.append(f)
                return

    @rx.event
    def remove(self, fruit: str):
        if fruit in self.fruits:
            self.fruits.remove(fruit)

    @rx.event
    def reset_fruits(self):
        self.fruits = ["apple", "banana"]


rx.vstack(
    rx.hstack(
        rx.foreach(
            ForeachLiveState.fruits,
            lambda f: rx.badge(f, rx.icon("x", size=12), on_click=ForeachLiveState.remove(f), cursor="pointer", size="2"),
        ),
        wrap="wrap",
    ),
    rx.hstack(
        rx.button("Add", on_click=ForeachLiveState.add, size="1"),
        rx.button("Reset", on_click=ForeachLiveState.reset_fruits, size="1", variant="soft", color_scheme="gray"),
        rx.text(ForeachLiveState.fruits.length(), " items", size="1", color_scheme="gray"),
        align="center",
    ),
)

인자	값	쓰임
첫째(`iterable`)	리스트·튜플·dict Var	돌 목록. 보통 State 변수나 계산 변수
둘째(`render_fn`)	함수 `(item)` 또는 `(item, index)`	항목 하나로 컴포넌트를 만든다. 둘째 인자는 0부터 세는 번호

번호도 함께 받기

함수가 인자를 둘 받으면 둘째로 번호(rx.Var[int], 0부터)가 옵니다. 색 상자는 첫 예제의 foreach_color_swatch를 그대로 씁니다(아래 dict 예제도 같습니다).

class ForeachIndexState(rx.State):
    colors: list[str] = ["#E5484D", "#12A594", "#3E63DD", "#AD5700"]


def foreach_colored_box_index(color: rx.Var[str], index: rx.Var[int]):
    return foreach_color_swatch(index, color)


rx.grid(
    rx.foreach(ForeachIndexState.colors, lambda color, index: foreach_colored_box_index(color, index)),
    columns="2",
    spacing="2",
)

중첩 리스트

rx.foreach 안에서 또 rx.foreach를 쓰면 2차원 목록을 그립니다. 이때 State 변수의 타입을 list[list[str]]처럼 끝까지 적어야 합니다. Reflex가 안쪽 항목의 타입을 알아야 하위 목록을 돌 수 있고, 잘못 쓴 코드를 브라우저 오류가 나기 전에 잡아 줍니다.

class ForeachNestedState(rx.State):
    numbers: list[list[str]] = [["1", "2", "3"], ["4", "5", "6"], ["7", "8", "9"]]


def foreach_display_row(row: rx.Var[list[str]]):
    return rx.hstack(
        rx.foreach(
            row,
            lambda item: rx.box(item, border=f"1px solid {rx.color('gray', 8)}", padding="0.5em", min_width="2.2em", text_align="center"),
        ),
    )


rx.vstack(rx.foreach(ForeachNestedState.numbers, foreach_display_row))

dict 돌기

dict를 넘기면 함수는 (키, 값) 쌍 하나를 받습니다. color[0]이 키, color[1]이 값입니다. 키는 원래 타입이 무엇이든(여기서는 int) 함수 안에서는 문자열로 바뀌어 옵니다.

class ForeachSimpleDictState(rx.State):
    color_chart: dict[int, str] = {1: "#3E63DD", 2: "#E5484D", 3: "#12A594"}


def foreach_display_color(color: rx.Var[tuple[str, str]]):
    # color is a key-value pair such as ("1", "#3E63DD").
    return foreach_color_swatch(color[0], color[1])


rx.grid(
    rx.foreach(ForeachSimpleDictState.color_chart, foreach_display_color),
    columns="3",
    spacing="2",
)

값이 리스트인 dict라면 값을 다시 rx.foreach로 돕니다. 아래는 키 색 하나 밑에 짝이 되는 색들을 늘어놓습니다.

#8E4EC6

#E5484D

#3E63DD

#F76B15

#AD5700

#E5484D

#12A594

#3E63DD

#AD5700

class ForeachComplexDictState(rx.State):
    color_chart: dict[str, list[str]] = {
        "#8E4EC6": ["#E5484D", "#3E63DD"],
        "#F76B15": ["#AD5700", "#E5484D"],
        "#12A594": ["#3E63DD", "#AD5700"],
    }


def foreach_display_colors(color: rx.Var[tuple[str, list[str]]]):
    return rx.vstack(
        foreach_color_swatch(color[0], color[0]),
        rx.hstack(rx.foreach(color[1], lambda x: foreach_color_swatch(x, x))),
        align="center",
        spacing="2",
    )


rx.grid(
    rx.foreach(ForeachComplexDictState.color_chart, foreach_display_colors),
    columns="3",
    spacing="4",
)

상수는 파이썬 내포로

목록이 바뀌지 않는 상수라면 rx.foreach가 필요 없습니다. 페이지를 만들 때 파이썬이 한 번 돌아 컴포넌트를 펼쳐 놓으면 되고, 항목도 진짜 파이썬 값이라 문자열 메서드나 if를 쓸 수 있습니다.

SMLXL

rx.hstack(
    *[rx.badge(size, variant="soft") for size in ["S", "M", "L", "XL"]],
)

주문서 완성

할 일은 {"id", "text"} dict의 리스트입니다(공식 문서처럼 dataclass 리스트도 됩니다). 항목마다 key=item["id"]를 주면, 하나를 지워도 나머지 줄이 그대로 유지됩니다. Done은 그 항목의 id를 핸들러에 넘기고, 핸들러는 그 id를 뺀 새 리스트를 만듭니다. 입력은 폼으로 받아 Enter로도 더할 수 있습니다.

Todos

Write Code
Sleep
Have Fun

class ForeachTodoState(rx.State):
    items: list[dict[str, str]] = [
        {"id": "1", "text": "Write Code"},
        {"id": "2", "text": "Sleep"},
        {"id": "3", "text": "Have Fun"},
    ]
    next_id: int = 4

    @rx.event
    def add_item(self, form_data: dict):
        text = form_data.get("new_item", "").strip()[:40]
        if text and len(self.items) < 8:
            self.items = self.items + [{"id": str(self.next_id), "text": text}]
            self.next_id += 1

    @rx.event
    def finish_item(self, item_id: str):
        self.items = [item for item in self.items if item["id"] != item_id]


rx.vstack(
    rx.heading("Todos", size="4"),
    rx.form(
        rx.hstack(
            rx.input(name="new_item", placeholder="Add a todo...", flex="1"),
            rx.button("Add", type="submit"),
            width="100%",
        ),
        on_submit=ForeachTodoState.add_item,
        reset_on_submit=True,
        width="100%",
    ),
    rx.divider(),
    rx.list.ordered(
        rx.foreach(
            ForeachTodoState.items,
            lambda item: rx.list.item(
                rx.hstack(
                    rx.button("Done", on_click=ForeachTodoState.finish_item(item["id"]), size="1", variant="soft"),
                    rx.text(item["text"]),
                    align="center",
                ),
                key=item["id"],
            ),
        ),
    ),
    width="100%",
    max_width="360px",
    padding="1em",
    border_radius="0.5em",
    background=rx.color("gray", 3),
)

공방 노트

rx.foreach(State.목록, 함수). 상수 목록에는 파이썬 내포.
함수가 받는 항목은 Var다. 파이썬 if 대신 rx.cond, 값은 item["key"]로.
(item, index)로 번호도 받는다. dict는 (키, 값) 쌍이고 키는 문자열이 된다.
중첩 리스트는 타입을 list[list[str]]처럼 끝까지 적는다.
지우고 더하는 목록에는 key=고유값을 준다.

← 이전

동적 렌더링 · Match

동적 렌더링 · Auto Scroll

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex