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

폼

Input

rx.inputrx.input.slot

공식 문서

공방 주문서

뉴스레터 구독 칸을 만들어 주세요. 이메일 한 줄을 받고, 형식이 틀리면 제출되지 않아야 합니다.

rx.input은 한 줄짜리 글을 입력받는 칸입니다. 검색어, 이름, 이메일, 비밀번호처럼 짧은 값을 받을 때 씁니다. 여러 줄이 필요하면 Text Area를 씁니다.

rx.input(placeholder="Search the docs")

속성 바꿔 보기

type을 바꾸면 같은 칸이 비밀번호 칸, 날짜 고르기, 색 고르기로 바뀝니다. 나머지는 생김새를 정하는 속성입니다.

속성 바꿔 보기

placeholder

type

variant

size

color

radius

disabled

read_only

rx.input(placeholder="Search the docs", type="text", variant="surface", size="2", color_scheme="indigo", radius="medium", disabled=False, read_only=False)

variant는 classic · surface · soft 세 가지입니다. read_only는 값을 보여 주기만 하고, disabled는 흐리게 하고 포커스도 막습니다.

속성	값	기본값	쓰임
`placeholder`	문자열	없음	비어 있을 때 흐리게 보이는 안내 글
`type`	`"text"` `"password"` `"email"` `"number"` `"date"` …	`"text"`	HTML `<input type>`과 같은 입력 종류
`value` / `default_value`	문자열·숫자	없음	제어할 값 / 처음 한 번만 넣는 값
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	생김새
`size`	`"1"` ~ `"3"`	`"2"`	높이와 글자 크기
`color_scheme`, `radius`	Radix 색 이름 / `"none"` ~ `"full"`	테마 값	강조색과 모서리
`name`, `required`	문자열 / `True`	없음	폼 제출 때 쓰는 이름, 비우면 제출 막기
`max_length`, `min_length`, `pattern`	숫자 / 정규식	없음	브라우저가 검사하는 글자 수·형식
`min`, `max`, `step`	숫자	없음	`type="number"`·`"date"` 등의 범위와 간격
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	막기, 읽기 전용, 페이지가 열리면 바로 포커스
`auto_complete`	`True` / `False`	브라우저 값	브라우저 자동 완성. 공식 문서는 `"off"` 같은 문자열도 적지만 0.10은 bool만 받는다
`on_change`	이벤트		값이 바뀔 때. 새 값(문자열)을 넘긴다
`on_blur`, `on_focus`	이벤트		포커스를 잃을 때 / 얻을 때. `on_blur`도 값을 넘긴다
`on_key_down`, `on_key_up`	이벤트		키를 누를 때 / 뗄 때. 키 이름을 넘긴다

on_blur: 다 쓰고 나갈 때 한 번

on_blur는 칸에서 포커스가 빠져나갈 때 한 번 불립니다. 칸 밖을 누르거나 Tab으로 넘어가면 그때의 값이 State로 갑니다. 글자마다 서버를 부르지 않아도 될 때 알맞습니다.

Hello World!

class InputBlurState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputBlurState.text, size="5"),
    rx.input(placeholder="Type, then click outside", on_blur=InputBlurState.set_text),
)

제어 입력: value + on_change

value에 State 값을 주고 on_change로 그 값을 고치면, 칸의 내용은 언제나 State와 같습니다. 이것을 제어(controlled) 입력이라 합니다. 서버에서 값을 바꾸면 칸도 따라 바뀝니다.

rx.input은 value와 on_change를 함께 받으면 안쪽에서 디바운스 입력(DebounceInput)으로 감쌉니다. 타자를 치는 동안에는 바로 화면에 보이고, 서버에는 잠시(기본 300ms) 멈췄을 때 한 번 보냅니다. 그래서 State가 값을 쥐고 있어도 입력이 끊기지 않습니다.

Hello World!

class InputControlledState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputControlledState.text, size="5"),
    rx.input(
        placeholder="Type here",
        value=InputControlledState.text,
        on_change=InputControlledState.set_text,
    ),
)

value 없이 on_change나 on_blur만 쓰면 비제어(uncontrolled) 입력입니다. 처음 값은 default_value로 넣고, 그 뒤로는 브라우저가 값을 들고 있습니다.

슬롯: 아이콘과 글 붙이기

rx.input.slot을 자식으로 넣으면 칸 안쪽에 아이콘이나 짧은 글이 붙습니다. side="right"이면 오른쪽에 붙습니다. 슬롯은 color_scheme도 따로 받습니다.

@example.com

rx.vstack(
    rx.input(
        rx.input.slot(rx.icon("search", size=16)),
        placeholder="Search the docs",
    ),
    rx.input(
        rx.input.slot(rx.icon("at-sign", size=16)),
        rx.input.slot(rx.text("@example.com", size="1"), side="right"),
        placeholder="username",
    ),
)

입력 종류 (type)

type은 HTML <input type>과 같은 값을 받습니다. "text"(기본), "password", "email", "number", "date", "time", "url", "color" 등이 있고, 브라우저가 알맞은 입력 도구를 보여 줍니다. 전체 목록은 MDN의 input 문서에 있습니다.

rx.vstack(
    rx.input(placeholder="Username", type="text"),
    rx.input(placeholder="Password", type="password"),
    rx.input(placeholder="Email", type="email"),
    rx.input(type="number", min=0, max=10, step=1, default_value="3"),
    rx.input(type="date"),
    rx.input(type="color", default_value="#3e63dd", width="80px"),
)

폼으로 제출하기

폼 안의 입력은 name이 있어야 제출 데이터에 이름: 값으로 들어갑니다. required=True이면 비어 있을 때 브라우저가 제출을 막습니다. pattern과 max_length도 브라우저가 제출 전에 검사합니다. 아래 두 번째 칸은 숫자 세 자리만 통과합니다.

Results:

{}

class InputFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.hstack(
                rx.input(name="username", placeholder="Username", required=True),
                rx.input(name="code", placeholder="3 digits", pattern="[0-9]{3}", max_length=3),
                rx.button("Submit", type="submit"),
            ),
            on_submit=InputFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(InputFormState.form_data.to_string())),
    ),
)

폼 자체는 Form 페이지에서 자세히 다룹니다.

State 없이 값 바꾸기: rx.set_value

rx.set_value("id", 값)은 id로 가리킨 입력의 값을 바로 바꿉니다. State 변수를 만들지 않고 칸을 비우거나 채울 때 씁니다.

rx.hstack(
    rx.input(id="input_erase_demo", default_value="Erase me"),
    rx.button("Erase", on_click=rx.set_value("input_erase_demo", "")),
    rx.button("Fill", on_click=rx.set_value("input_erase_demo", "Hello"), variant="soft"),
)

키보드 이벤트

on_key_down은 키를 누를 때마다 키 이름("Enter", "a" …)을 넘깁니다. Enter로 무언가를 실행하고 싶다면 보통은 입력을 폼에 넣는 편이 더 간단합니다.

Last key: -

class InputKeyState(rx.State):
    last_key: str = "-"

    @rx.event
    def on_key(self, key: str):
        self.last_key = key


rx.vstack(
    rx.input(placeholder="Press any key", on_key_down=InputKeyState.on_key),
    rx.text("Last key: ", rx.code(InputKeyState.last_key)),
)

주문서 완성

type="email"과 required=True로 브라우저가 형식을 먼저 검사하고, 폼이 Enter와 버튼 제출을 함께 처리합니다. 받은 주소는 최근 세 개만 보여 줍니다.

class InputNewsletterState(rx.State):
    emails: list[str] = []

    @rx.event
    def subscribe(self, form_data: dict):
        email = form_data.get("email", "").strip()
        if email and email not in self.emails:
            self.emails = (self.emails + [email])[-3:]


rx.vstack(
    rx.form(
        rx.hstack(
            rx.input(
                rx.input.slot(rx.icon("mail", size=16)),
                name="email",
                type="email",
                placeholder="you@example.com",
                required=True,
                flex="1",
            ),
            rx.button("Subscribe", type="submit"),
            width="100%",
        ),
        on_submit=InputNewsletterState.subscribe,
        reset_on_submit=True,
        width="100%",
    ),
    rx.foreach(InputNewsletterState.emails, lambda e: rx.badge(e, variant="soft")),
    width="100%",
    max_width="420px",
)

공방 노트

rx.input(placeholder=...)으로 만들고, type으로 입력 종류를 고른다.
on_blur는 다 쓰고 나갈 때 한 번, value + on_change는 제어 입력(자동 디바운스).
아이콘은 rx.input.slot, 오른쪽은 side="right".
폼에서는 name이 키가 되고, required · pattern · max_length를 브라우저가 검사한다.
State 없이 값을 바꿀 때는 rx.set_value("id", 값).

← 이전

폼 · Button

폼 · Text Area

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex