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

데이터 표시

Code Block

rx.code_blockrx.code_block.themes

공식 문서

공방 주문서

설치 안내 페이지에 '설치 명령'과 '첫 앱 코드'를 색이 입혀진 코드 상자로 넣고, 복사 버튼도 달아 주세요.

rx.code_block은 여러 줄 코드를 언어에 맞게 색칠해 보여 줍니다. 줄 바꿈과 들여쓰기를 그대로 담은 문자열을 첫 인자로 넘기고, language로 언어를 알려 줍니다. 한 줄 안의 짧은 코드는 rx.code를 씁니다. 이 강의의 모든 예제 코드도 rx.code_block으로 보입니다.

1
2
3
4
5
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)

rx.code_block(
    """def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)""",
    language="python",
    show_line_numbers=True,
)

속성 바꿔 보기

언어를 바꾸면 같은 글도 다르게 색칠됩니다. 아래 칸에 다른 코드를 한 줄 써 보아도 됩니다.

속성 바꿔 보기

1
SELECT name FROM users WHERE id = 1;

code

language

show_line_numbers

rx.code_block("SELECT name FROM users WHERE id = 1;", language="sql", show_line_numbers=True)

language는 색칠 규칙을 정합니다. show_line_numbers를 켜면 왼쪽에 줄 번호가 붙습니다.

속성	값	기본값	쓰임
첫 인자 (`code`)	문자열	필수	보여 줄 코드
`language`	`"python"` `"javascript"` `"sql"` `"bash"` …	`"python"`	색칠 규칙
`theme`	`rx.code_block.themes.…`	밝을 때 `one_light`, 어두울 때 `one_dark`	색 조합
`show_line_numbers`	`True` / `False`	`False`	줄 번호
`starting_line_number`	정수	`1`	첫 줄 번호
`wrap_long_lines`	`True` / `False`	`False`	긴 줄을 접어서 보이기
`can_copy`	`True` / `False`	`False`	오른쪽 위 복사 버튼
`copy_button`	컴포넌트	없음	기본 복사 버튼 대신 쓸 버튼
`custom_style`	dict	없음	코드 상자의 스타일
`code_tag_props`	dict	없음	안쪽 `code` 태그에 넘길 속성

테마

theme에는 rx.code_block.themes의 값을 줍니다. "dracula" 같은 문자열은 받지 않습니다. 주지 않으면 밝은 모드에서 one_light, 어두운 모드에서 one_dark가 자동으로 쓰입니다.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.code_block.themes.dracula,
)

모드마다 테마를 직접 고르려면 rx.color_mode_cond에 밝을 때와 어두울 때의 값을 넘깁니다.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.color_mode_cond(
        light=rx.code_block.themes.one_light,
        dark=rx.code_block.themes.one_dark,
    ),
)

State의 문자열로 테마를 고르고 싶다면, 문자열을 그대로 넘길 수 없으므로 rx.match로 테마 값에 짝지어 줍니다. 그 밖에도 nord, vs_dark, ghcolors, night_owl, material_dark 등 40여 가지가 있습니다.

for i in range(3):
    print(i)

class CodeBlockThemeState(rx.State):
    theme_name: str = "dracula"

    @rx.event
    def set_code_block_theme(self, value: str):
        self.theme_name = value


rx.vstack(
    rx.select(["dracula", "nord", "vs_dark", "ghcolors"], value=CodeBlockThemeState.theme_name, on_change=CodeBlockThemeState.set_code_block_theme),
    rx.code_block(
        "for i in range(3):\n    print(i)",
        language="python",
        theme=rx.match(
            CodeBlockThemeState.theme_name,
            ("dracula", rx.code_block.themes.dracula),
            ("nord", rx.code_block.themes.nord),
            ("vs_dark", rx.code_block.themes.vs_dark),
            rx.code_block.themes.ghcolors,
        ),
        width="100%",
    ),
    width="100%",
)

줄 번호와 긴 줄

starting_line_number는 첫 줄 번호를 정합니다. 긴 파일의 일부만 보여 줄 때 원래 줄 번호를 맞춥니다. wrap_long_lines=True는 가로로 넘치는 줄을 다음 줄로 접습니다.

10
11
12
13
total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")

rx.code_block(
    """total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")""",
    language="python",
    show_line_numbers=True,
    starting_line_number=10,
    wrap_long_lines=True,
)

복사 버튼과 스타일

can_copy=True를 주면 오른쪽 위에 복사 버튼이 붙고, 누르면 코드가 클립보드에 들어갑니다. 공식 문서의 속성 표에는 없지만 Reflex 0.10에 있는 속성입니다. 버튼 모양을 바꾸려면 copy_button에 직접 만든 버튼을 넘깁니다.

pip install reflex

rx.code_block(
    "pip install reflex",
    language="bash",
    can_copy=True,
)

width, font_size 같은 스타일 속성과 custom_style은 코드 상자에 적용됩니다. 안쪽 code 태그에 따로 줄 것은 code_tag_props로 넘깁니다.

{"name": "reflex", "version": "0.10.0"}

rx.code_block(
    '{"name": "reflex", "version": "0.10.0"}',
    language="json",
    custom_style={"borderRadius": "12px", "fontSize": "15px"},
    code_tag_props={"style": {"fontFamily": "monospace"}},
)

주문서 완성

설치 명령은 bash로, 첫 앱 코드는 줄 번호를 붙인 python으로 보여 주고, 둘 다 복사 버튼을 답니다.

1. Install

pip install reflex

2. Create an app

1
2
3
4
5
6
7
8
9
import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)

rx.vstack(
    rx.text("1. Install", weight="bold"),
    rx.code_block("pip install reflex", language="bash", can_copy=True, width="100%"),
    rx.text("2. Create an app", weight="bold"),
    rx.code_block(
        """import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)""",
        language="python",
        show_line_numbers=True,
        can_copy=True,
        width="100%",
    ),
    width="100%",
)

공방 노트

rx.code_block("코드", language="python")으로 색칠된 코드 상자를 만든다.
theme은 rx.code_block.themes.이름. 문자열은 안 되고, State로 고르려면 rx.match.
show_line_numbers · starting_line_number · wrap_long_lines로 줄을 다룬다.
can_copy=True로 복사 버튼(0.10, 문서 표에는 없음), copy_button으로 버튼 교체.

← 이전

데이터 표시 · Data List

데이터 표시 · Progress

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex