컴포넌트 공방: Reflex 라이브러리 100
·
강의 개요
레이아웃
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
타이포그래피
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
rx.text_area공식 문서
공방 주문서
주문 상세 화면에 리뷰 쓰는 칸을 넣어 주세요. 200자까지, 남은 글자 수가 보이고, Enter로 바로 올릴 수 있어야 합니다.
rx.text_area는 여러 줄을 입력받는 칸입니다. 댓글, 문의 내용, 메모처럼 줄바꿈이 들어갈 수 있는 글에 씁니다. 사용법은 rx.input과 거의 같고, 줄 수(rows)와 크기 조절(resize), 높이 자동 맞춤(auto_height)이 더 있습니다.
rx.text_area(placeholder="Type here...")auto_height를 켜고 여러 줄을 써 보세요. 칸이 글에 맞춰 늘어납니다. resize는 오른쪽 아래 손잡이로 사용자가 크기를 바꿀 수 있는 방향입니다.
속성 바꿔 보기
placeholder
rows
resize
variant
size
color
radius
auto_height
disabled
rx.text_area(placeholder="Write a comment...", rows="3", resize="vertical", variant="surface", size="2", color_scheme="indigo", radius="medium", auto_height=False, disabled=False)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
placeholder | 문자열 | 없음 | 비어 있을 때 보이는 안내 글 |
value / default_value | 문자열 | 없음 | 제어할 값 / 처음 한 번만 넣는 값 |
rows, cols | 문자열 숫자 | 브라우저 값 | 처음 보이는 줄 수, 글자 폭 |
resize | "none" "vertical" "horizontal" "both" | 테마 값 | 사용자가 크기를 바꿀 수 있는 방향 |
auto_height | True / False | False | 글 길이에 맞춰 높이를 늘린다(min_height와 함께) |
enter_key_submit | True / False / Var | False | Enter로 폼 제출, Shift+Enter는 줄바꿈 |
variant, size, color_scheme, radius | Input과 같음 | 생김새 | |
name, required, max_length, min_length | 없음 | 폼 제출 이름과 브라우저 검사 | |
disabled, read_only, auto_focus | True / False | False | 막기, 읽기 전용, 자동 포커스 |
on_change, on_blur | 이벤트 | 값이 바뀔 때 / 포커스를 잃을 때. 값을 넘긴다 | |
on_key_down, on_key_up | 이벤트 | 키를 누를 때 / 뗄 때 |
Input처럼 on_blur는 칸을 떠날 때 그때까지 쓴 글을 한 번 넘깁니다. value와 on_change를 함께 주면 제어 입력이 되고, 이때도 디바운스가 자동으로 붙습니다.
class TextAreaBlurState(rx.State):
text: str = "Hello World!"
@rx.event
def set_text(self, text: str):
self.text = text
rx.vstack(
rx.heading(TextAreaBlurState.text, size="4"),
rx.text_area(placeholder="Type, then click outside", on_blur=TextAreaBlurState.set_text),
width="100%",
)폼 데이터에서는 name이 키가 됩니다. 아래는 공식 문서의 피드백 폼입니다. 칸은 value + on_change로 State가 쥐고 있고, 보내면 rx.cond로 감사 카드로 바뀝니다. required=True라서 빈 글은 보낼 수 없습니다.
class TextAreaFeedbackState(rx.State):
feedback: str = ""
submitted: bool = False
@rx.event
def set_feedback(self, value: str):
self.feedback = value
@rx.event
def submit_feedback(self, form_data: dict):
self.submitted = True
@rx.event
def reset_form(self):
self.feedback = ""
self.submitted = False
rx.cond(
TextAreaFeedbackState.submitted,
rx.card(
rx.vstack(
rx.text("Thank you! You wrote:"),
rx.blockquote(TextAreaFeedbackState.feedback),
rx.button("Submit another response", on_click=TextAreaFeedbackState.reset_form),
),
),
rx.card(
rx.form(
rx.flex(
rx.text("Are you enjoying Reflex?"),
rx.text_area(
name="feedback",
placeholder="Write your feedback...",
value=TextAreaFeedbackState.feedback,
on_change=TextAreaFeedbackState.set_feedback,
resize="vertical",
required=True,
),
rx.button("Send", type="submit"),
direction="column",
spacing="3",
),
on_submit=TextAreaFeedbackState.submit_feedback,
),
),
)여러 줄 칸에서 Enter는 원래 줄바꿈입니다. enter_key_submit=True이면 Enter가 감싸고 있는 폼을 제출하고, Shift+Enter가 줄바꿈이 됩니다. 이 속성은 Var도 받으므로, 아래처럼 스위치로 켜고 끌 수 있습니다. 처리 중에는 끄려면 enter_key_submit=~State.is_loading처럼 씁니다.
enter_key_submit은 자체 키 처리기를 쓰기 때문에 on_key_down과 함께 줄 수 없습니다(함께 주면 ValueError). Python의 on_key_down 핸들러는 키 이름만 받아서 줄바꿈을 막을 수도 없습니다. 둘 다 필요하면 rx.call_script 같은 브라우저 쪽 처리가 필요합니다.
Enter submits
Nothing submitted yet.
class TextAreaEnterState(rx.State):
submitted_text: str = ""
enter_submits: bool = True
@rx.event
def handle_submit(self, form_data: dict):
self.submitted_text = form_data.get("message", "")
@rx.event
def set_enter_submits(self, value: bool):
self.enter_submits = value
rx.vstack(
rx.hstack(
rx.switch(checked=TextAreaEnterState.enter_submits, on_change=TextAreaEnterState.set_enter_submits),
rx.text("Enter submits", size="2"),
align="center",
),
rx.form(
rx.text_area(
name="message",
placeholder="Type and press Enter (Shift+Enter for a new line)",
enter_key_submit=TextAreaEnterState.enter_submits,
),
on_submit=TextAreaEnterState.handle_submit,
reset_on_submit=True,
width="100%",
),
rx.cond(
TextAreaEnterState.submitted_text != "",
rx.text("Submitted: ", rx.code(TextAreaEnterState.submitted_text)),
rx.text("Nothing submitted yet.", color_scheme="gray"),
),
width="100%",
)auto_height=True이면 칸 안에서 스크롤하는 대신 글에 맞춰 칸이 커집니다. rows="1"과 min_height="0"을 함께 주면 한 줄에서 시작해 늘어납니다. 너무 커지지 않게 하려면 max_height를 줍니다. 아래는 160px에서 멈춥니다.
rx.text_area(
placeholder="Type a few lines - the box grows to fit",
auto_height=True,
rows="1",
min_height="0",
max_height="160px",
width="100%",
)value + on_change로 글을 State가 쥐고, 계산 변수 left로 남은 글자 수를 보입니다. max_length는 브라우저가, [:200]은 서버가 한 번 더 길이를 막습니다. 저장할 때는 디바운스로 아직 State에 닿지 않은 글자가 없도록 form_data의 값을 씁니다. auto_height로 늘어나고, enter_key_submit으로 Enter를 누르면 올라갑니다.
class TextAreaReviewState(rx.State):
review: str = ""
saved: str = ""
@rx.event
def set_review(self, value: str):
self.review = value[:200]
@rx.event
def save(self, form_data: dict):
self.saved = form_data.get("review", "")[:200]
self.review = ""
@rx.var
def left(self) -> int:
return 200 - len(self.review)
rx.form(
rx.vstack(
rx.text_area(
name="review",
placeholder="How was your order?",
value=TextAreaReviewState.review,
on_change=TextAreaReviewState.set_review,
max_length=200,
auto_height=True,
rows="2",
min_height="0",
enter_key_submit=True,
width="100%",
),
rx.hstack(
rx.text(TextAreaReviewState.left, " characters left", size="1", color_scheme="gray"),
rx.spacer(),
rx.button("Post review", type="submit", disabled=TextAreaReviewState.review == ""),
width="100%",
align="center",
),
rx.cond(TextAreaReviewState.saved != "", rx.callout(TextAreaReviewState.saved, icon="message-square")),
width="100%",
),
on_submit=TextAreaReviewState.save,
width="100%",
max_width="460px",
)공방 노트
rx.text_area는 여러 줄 입력. 쓰는 법은 rx.input과 같다(on_blur, value + on_change).
rows로 처음 줄 수, resize로 사용자가 늘리는 방향을 정한다.
auto_height=True + rows="1" + min_height="0"이면 글에 맞춰 커진다. 상한은 max_height.
enter_key_submit=True면 Enter가 폼 제출, Shift+Enter가 줄바꿈. on_key_down과는 함께 못 쓴다.
폼에서는 name이 키, required · max_length를 브라우저가 검사한다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.