컴포넌트 공방: 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.link는 눌러서 다른 곳으로 이동하는 글자입니다. href에 갈 곳을 적습니다. 외부 주소(https://…)도, 이 앱 안의 경로(/courses)도, 같은 페이지의 위치(#id)도 됩니다.
rx.link("Reflex Home Page.", href="https://reflex.dev/")링크의 생김새는 rx.text와 비슷한 글자 속성에 underline이 더해진 것입니다. is_external을 켜면 새 탭에서 열립니다.
속성 바꿔 보기
label
underline
size
weight
trim
color
high_contrast
is_external
rx.link("Visit Reflex", href="https://reflex.dev/", underline="auto", size="3", weight="regular", trim="normal", color_scheme="indigo", high_contrast=False, is_external=True)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
href | 주소 문자열 | 없음 | 갈 곳. 외부 주소, 앱 안 경로, #id |
is_external | True / False | False | 새 탭에서 열기(target="_blank") |
underline | "auto" "hover" "always" "none" | "auto" | 밑줄이 보이는 때 |
size | "1" ~ "9" | 물려받음 | 글자 크기 |
weight | "light" "regular" "medium" "bold" | 물려받음 | 굵기 |
trim | "normal" "start" "end" "both" | "normal" | 위아래 줄 간격 여백 잘라내기 |
color_scheme | Radix 색 이름 | 테마 색 | 글자 색 |
high_contrast | True / False | False | 배경과의 대비를 더 크게 |
target | "_self" "_blank" "_parent" "_top" | 없음 | 열 위치를 직접 지정 |
rel | 문자열 | 없음 | 링크 관계("nofollow", "noopener" …) |
download | True 또는 파일 이름 | 없음 | 이동하지 않고 파일로 내려받기 |
referrer_policy · href_lang · media · ping | HTML <a> 속성 | 없음 | 그대로 <a>에 전달 |
이벤트는 on_click 같은 기본 이벤트만 있습니다.
href가 /로 시작하면 이 앱의 경로입니다. 전체 주소를 쓸 필요가 없고, Reflex는 페이지를 새로 불러오지 않고 화면만 바꿉니다(클라이언트 이동). 그래서 외부 링크보다 빠르게 넘어갑니다.
자식으로 글자 대신 버튼이나 카드를 넣으면 그 컴포넌트 전체가 링크가 됩니다. 카드처럼 큰 덩어리를 감쌀 때는 underline="none"으로 밑줄을 없애는 것이 보통입니다.
rx.flex(
rx.link(rx.button("Example"), href="https://reflex.dev/"),
rx.link(
rx.card(rx.text("Reflex docs", weight="bold"), rx.text("Open the official docs", size="2", color_scheme="gray")),
href="https://reflex.dev/docs/",
is_external=True,
underline="none",
),
spacing="4",
align="center",
wrap="wrap",
)어떤 컴포넌트에 id="lib-link-footer"를 주면, href="#lib-link-footer"인 링크가 그 위치로 화면을 옮깁니다. 다른 페이지의 한 곳이라면 "/courses/some-page#lib-link-footer"처럼 경로 뒤에 #과 id를 붙입니다. 아래 링크를 누르면 이 페이지 끝의 주문서 완성 예제로 이동합니다.
rx.link("Jump to the footer below", href="#lib-link-footer")underline의 네 가지 값을 비교해 보세요. hover는 마우스를 올려야 밑줄이 보이고, auto도 보통은 그렇게 동작합니다. 크기·굵기·색·대비·trim은 rx.text와 같은 방식입니다.
rx.flex(
rx.link("underline auto", href="#", underline="auto"),
rx.link("underline hover", href="#", underline="hover"),
rx.link("underline always", href="#", underline="always"),
rx.link("underline none", href="#", underline="none"),
direction="column",
spacing="3",
)rx.flex(
rx.link("Size 2, regular", href="#", size="2"),
rx.link("Size 4, medium", href="#", size="4", weight="medium"),
rx.link("Size 6, bold", href="#", size="6", weight="bold"),
rx.link("crimson", href="#", color_scheme="crimson"),
rx.link("high contrast", href="#", high_contrast=True),
rx.link(
"With Trim",
href="#",
trim="both",
style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
),
direction="column",
spacing="3",
)저장한 뒤 이동하는 것처럼, 이벤트 핸들러가 일을 마친 다음 페이지를 옮기려면 링크 대신 rx.redirect("경로")를 돌려줍니다. 아래 버튼을 누르면 홈으로 이동합니다.
class LinkRedirectState(rx.State):
@rx.event
def go_home(self):
return rx.redirect("/")
rx.button(rx.icon("house"), "Save and go home", on_click=LinkRedirectState.go_home)사이트 안 링크는 href="/…"로, 외부 링크는 is_external=True로 새 탭에서 엽니다. 바닥글 링크는 회색에 underline="hover"로 힘을 뺍니다. 이 바닥글에는 id="lib-link-footer"가 있어, 위의 앵커 링크가 이곳으로 옵니다.
rx.flex(
rx.text("Shop", weight="bold", size="2"),
rx.link("Home", href="/", size="2", color_scheme="gray", underline="hover"),
rx.link("Courses", href="/courses", size="2", color_scheme="gray", underline="hover"),
rx.spacer(),
rx.link("GitHub", rx.icon("external-link", size=14), href="https://github.com/reflex-dev/reflex", is_external=True, size="2",
color_scheme="gray", underline="hover", display="flex", align_items="center", gap="4px"),
id="lib-link-footer",
spacing="4",
align="center",
wrap="wrap",
padding="12px 16px",
border_top=f"1px solid {rx.color('gray', 6)}",
width="100%",
)공방 노트
rx.link("글자", href="…"). 외부 주소, 앱 안 경로(/…), 같은 페이지의 #id 모두 된다.
앱 안 경로는 페이지를 새로 불러오지 않고 이동한다. 새 탭은 is_external=True.
underline: auto · hover · always · none. 나머지 글자 속성은 rx.text와 같다.
버튼·카드를 자식으로 넣으면 통째로 링크가 된다.
핸들러 안에서 이동은 return rx.redirect("/경로").
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.