ReflexKR

컴포넌트 공방: 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

그 밖의 도구

Script

rx.script

공식 문서

공방 주문서

방문자의 브라우저가 알려 주는 시간대와 언어를, 서버를 거치지 않고 카드에 바로 보여 주세요.

rx.script는 페이지에 <script> 태그를 넣어 자바스크립트를 실행합니다. 짧은 코드를 직접 쓰거나, src로 자바스크립트 파일을 불러옵니다. 조건부 렌더링과 함께 써도 안전해서, 스크립트를 넣을지 말지를 State로 정할 수 있습니다. 분석 도구나 소셜 위젯 스크립트를 붙일 때 특히 쓸모가 있습니다.

Open the browser console (F12) to see the log.

rx.vstack(
    rx.script("console.log('inline javascript')"),
    rx.text("Open the browser console (F12) to see the log.", size="2"),
)

State로 스크립트 넣고 빼기

rx.script에는 눈에 보이는 속성이 없으므로 실습대 대신 State로 움직여 봅니다. rx.cond가 참이 되는 순간 스크립트가 들어가 실행되고, 아래 문단의 글을 바꿉니다. 스크립트를 빼도 이미 일어난 일(바뀐 글)은 되돌아가지 않습니다. 스크립트의 효과는 페이지에 남는다는 점을 기억합니다.

The script has not run yet.

class ScriptToggleState(rx.State):
    enabled: bool = False

    @rx.event
    def toggle(self):
        self.enabled = not self.enabled


rx.vstack(
    rx.button(
        rx.cond(ScriptToggleState.enabled, "Remove script", "Add script"),
        on_click=ScriptToggleState.toggle,
        variant="soft",
    ),
    rx.cond(
        ScriptToggleState.enabled,
        rx.script("document.getElementById('script_toggle_out').textContent = 'Script ran at ' + new Date().toLocaleTimeString();"),
    ),
    rx.text("The script has not run yet.", id="script_toggle_out", size="2"),
)

속성	값	기본값	쓰임
첫 번째 자식	자바스크립트 문자열	없음	바로 실행할 코드. 자식과 `src` 중 하나는 꼭 있어야 한다
`src`	URL	없음	불러올 자바스크립트 파일
`async_`	`True` / `False`	없음	내려받는 대로 따로 실행
`defer`	`True` / `False`	없음	문서를 다 읽은 뒤 실행
`type`	`"module"` 등 MIME	없음	스크립트 종류
`char_set` `cross_origin` `integrity` `referrer_policy`	문자열	없음	외부 파일의 인코딩, CORS, 무결성 검사, 리퍼러
`custom_attrs`	dict	없음	`data-*`처럼 그 밖에 필요한 속성
`id` `key` `class_name` `on_mount` `on_unmount`		없음	그 밖에 받는 속성. 다른 속성을 주면 경고가 나온다

짧게, 길면 파일로

복잡한 인라인 스크립트는 피합니다. 두세 줄이 넘으면 assets 폴더에 .js 파일로 두고 src로 불러오는 편이 고치기 쉽습니다. 분석·소셜 스크립트가 요구하는 data-* 속성은 custom_attrs로 줍니다. 이 강의는 외부 스크립트를 불러오지 않으므로 코드로만 보입니다.

# load assets/my-custom.js (files in assets/ are served under /)
rx.script(src="/my-custom.js")

# tracking/social scripts: pass the data-* attributes they need via custom_attrs
rx.script(
    src="//gc.zgo.at/count.js",
    custom_attrs={"data-goatcounter": "https://reflextoys.goatcounter.com/count"},
)

공식 문서는 rx.script가 Next.js의 next/script를 쓴다고 설명하고, 그려진 태그에 data-nscript="afterInteractive"가 붙는다고 적었습니다. Reflex 0.10은 Next.js 대신 React Router를 쓰고, rx.script는 react-helmet으로 태그를 문서의 <head>에 넣습니다. 그래서 위 코드는 대략 이렇게 그려집니다.

<!-- Reflex 0.10: react-helmet puts it in the document <head> -->
<script src="//gc.zgo.at/count.js" data-goatcounter="https://reflextoys.goatcounter.com/count"></script>

이벤트로 실행하기: rx.call_script

페이지에 늘 붙어 있을 스크립트가 아니라 "버튼을 누를 때 한 번" 실행할 코드라면 rx.call_script 이벤트가 더 알맞습니다. callback을 주면 자바스크립트의 결과 값을 State의 핸들러로 돌려받습니다.

unknown

class ScriptCallState(rx.State):
    language: str = "unknown"

    @rx.event
    def receive_language(self, value: str):
        self.language = value


rx.hstack(
    rx.button(
        "Read browser language",
        on_click=rx.call_script("navigator.language", callback=ScriptCallState.receive_language),
        variant="outline",
    ),
    rx.badge(ScriptCallState.language),
    align="center",
)

주문서 완성

카드가 그려질 때 들어간 인라인 스크립트가 브라우저의 Intl과 navigator.language를 읽어 제목의 글을 바꿉니다. 서버에는 아무것도 보내지 않습니다.

Your time zone

Detecting...

rx.card(
    rx.script(
        "const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;"
        " document.getElementById('script_order_tz').textContent = tz + ' · ' + navigator.language;"
    ),
    rx.text("Your time zone", size="1", color_scheme="gray"),
    # the script rewrites this text before React takes over the page,
    # so tell React the mismatch is expected
    rx.heading("Detecting...", id="script_order_tz", size="4", custom_attrs={"suppressHydrationWarning": True}),
    max_width="320px",
)

공방 노트

rx.script("코드")는 인라인, rx.script(src="/file.js")는 파일. 둘 중 하나는 꼭.
rx.cond와 함께 써서 State로 넣고 뺄 수 있다. 이미 실행된 효과는 남는다.
두세 줄이 넘으면 assets 폴더의 .js 파일로. data-* 속성은 custom_attrs.
0.10의 rx.script는 next/script가 아니라 react-helmet으로 <head>에 들어간다.
버튼을 누를 때 한 번 실행할 코드는 rx.call_script(callback=...)가 알맞다.

← 이전

그 밖의 도구 · Html Embed

그 밖의 도구 · Memo

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex