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

그 밖의 도구

Skeleton

rx.skeleton

공식 문서

공방 주문서

프로필 카드를 불러오는 1~2초 동안, 화면이 덜컹거리지 않도록 같은 크기의 회색 자리를 보여 주세요.

rx.skeleton은 내용을 불러오는 동안 그 자리에 보이는 회색 자리표시입니다. 자식을 감싸면 자식의 크기만큼 깜빡이는 상자가 되고, 불러오기가 끝나면 진짜 내용이 같은 자리에 나타나므로 화면 배치가 흔들리지 않습니다. loading을 주지 않으면 자리표시 상태입니다.

rx.skeleton(rx.button("Loading button"))

속성 바꿔 보기

loading을 끄면 자리표시가 걷히고 진짜 내용이 보입니다. 자식이 없는 rx.skeleton은 width·height로 크기를 정합니다.

속성 바꿔 보기

title

width

height

rx.vstack(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="RX", size="4"), loading=True),
        rx.box(
            rx.skeleton(rx.heading("Grace Hopper", size="3"), loading=True),
            rx.skeleton(rx.text("Posted two days ago.", size="2"), loading=True),
        ),
        rx.skeleton(rx.button("Follow"), loading=True),
        spacing="3",
        align="center",
    ),
    rx.skeleton(width="240px", height="24px", loading=True),
    spacing="4",
)

loading이 켜져 있으면 안의 버튼을 누를 수 없습니다. 자리표시가 자식의 크기를 그대로 지키므로, 꺼도 배치가 움직이지 않습니다.

속성	값	기본값	쓰임
`loading`	`True` / `False`	`True`	자리표시를 보일지, 진짜 내용을 보일지
`width` `height`	CSS 길이(반응형 가능)	자식의 크기	자리표시의 크기
`min_width` `max_width`	CSS 길이	없음	폭의 최소·최대
`min_height` `max_height`	CSS 길이	없음	높이의 최소·최대

크기와 loading

공식 문서의 예제입니다. 버튼을 감싼 두 자리표시는 height로 높이를 바꿨고, 아래 둘은 loading이 True일 때와 False일 때입니다.

Text is already loaded.

rx.vstack(
    rx.skeleton(rx.button("button-small"), height="10px"),
    rx.skeleton(rx.button("button-big"), height="20px"),
    rx.skeleton(rx.text("Text is loaded."), loading=True),
    rx.skeleton(rx.text("Text is already loaded."), loading=False),
)

글자는 글자 자체를 감싼다

글자의 자리표시는 글자를 감싼 부모가 아니라 글자 자체를 감쌉니다. 부모를 감싸면 부모의 폭 전체가 회색이 되고, 글자를 감싸면 실제 글 길이만큼만 회색이 됩니다. rx.text(rx.skeleton("..."))처럼 씁니다.

Wrap the parent:

Wrap the text itself:

rx.vstack(
    rx.text("Wrap the parent:", size="1", color_scheme="gray"),
    rx.skeleton(rx.box(rx.text("Short text"), width="100%")),
    rx.text("Wrap the text itself:", size="1", color_scheme="gray"),
    rx.text(rx.skeleton("Short text")),
    width="300px",
)

크기를 직접 주기

자식 없이 width·height만 주면 빈 자리표시 상자가 됩니다. 아직 어떤 내용이 올지 모르는 줄, 그림, 아이콘 자리를 미리 잡아 둘 때 씁니다.

rx.vstack(
    rx.skeleton(width="240px", height="16px"),
    rx.skeleton(width="180px", height="16px"),
    rx.skeleton(width="100%", max_width="320px", height="80px"),
    rx.skeleton(width="48px", height="48px"),
    width="100%",
)

주문서 완성

Reload를 누르면 백그라운드 이벤트가 loading을 켜고, 1.5초 기다린 뒤 끕니다. 그동안 아바타, 이름, 소개가 각자의 크기대로 자리표시로 바뀝니다. 소개 글은 rx.text 안에서 글자를 감쌌으므로 글 길이만큼만 회색이 됩니다.

Ada Lovelace

Wrote the first program.

import asyncio


class SkeletonProfileState(rx.State):
    loading: bool = False
    name: str = "Ada Lovelace"
    bio: str = "Wrote the first program."

    @rx.event(background=True)
    async def reload_profile(self):
        async with self:
            self.loading = True
        await asyncio.sleep(1.5)
        async with self:
            self.loading = False


rx.card(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="AL", size="5", radius="full"), loading=SkeletonProfileState.loading),
        rx.box(
            rx.skeleton(rx.heading(SkeletonProfileState.name, size="4"), loading=SkeletonProfileState.loading),
            rx.text(rx.skeleton(SkeletonProfileState.bio, loading=SkeletonProfileState.loading), size="2", color_scheme="gray"),
        ),
        spacing="4",
        align="center",
    ),
    rx.button(
        "Reload",
        on_click=SkeletonProfileState.reload_profile,
        disabled=SkeletonProfileState.loading,
        variant="soft",
        margin_top="12px",
    ),
    max_width="360px",
)

공방 노트

rx.skeleton(자식)은 자식의 크기 그대로 회색 자리표시가 된다.
loading=False면 진짜 내용. 주지 않으면 자리표시 상태(True).
글자는 부모가 아니라 글자 자체를 감싼다: rx.text(rx.skeleton("...")).
자식 없이 width·height로 빈 자리를 잡는다.
자리표시 중에는 안의 버튼·입력칸을 누를 수 없다.

← 이전

그 밖의 도구 · Theme

그 밖의 도구 · Clipboard

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex