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

데이터 표시

Moment

rx.momentrx.MomentDelta

공식 문서

공방 주문서

리뷰 목록의 각 글 아래에 '3분 전', '2시간 전'처럼 쓴 시각을 상대 시간으로 보여 주세요. 마우스를 올리면 정확한 시각도 보이게요.

rx.moment는 react-moment를 감싼 날짜 표시 컴포넌트입니다. 날짜를 원하는 형식으로 바꾸고, "5분 전" 같은 상대 시간과 시간대 변환을 브라우저에서 처리합니다.

이 페이지의 예제는 아래 State의 date_now를 씁니다. 서버가 켜질 때의 시각(UTC)이고, "Update"를 누르면 지금 시각으로 바뀌어 아래 예제들에 함께 반영됩니다. Reflex 문서는 datetime을 그대로 State에 두지만, 여기서는 ISO 문자열로 둡니다. rx.moment는 둘 다 받습니다.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now),
    rx.button("Update", on_click=MomentDateState.update_moment_date, size="1", variant="soft"),
)

속성 바꿔 보기

format의 토큰은 moment.js 규칙을 따릅니다(YYYY 연, MM 월, DD 일, HH 시, mm 분, ss 초, ddd 요일). from_now를 켜면 형식 대신 상대 시간이 보입니다.

속성 바꿔 보기

format

from_now

from_now_short

with_title

rx.moment("2026-01-01T09:00:00Z", format="YYYY-MM-DD HH:mm", tz="Asia/Seoul", from_now=False, from_now_short=False, with_title=False)

tz를 바꾸면 같은 순간이 그 지역 시각으로 보입니다. with_title을 켜고 마우스를 올리면 전체 날짜가 툴팁으로 나옵니다.

속성	값	쓰임
첫 인자 / `date`	문자열, `datetime`, `date` …	보여 줄 날짜. 없으면 지금 시각
`format`	`"YYYY-MM-DD"` 같은 형식	표시 형식
`from_now` / `to_now`	`True` / `False`	"5분 전" / "5분 후"처럼 상대 시간
`from_now_short`	`True` / `False`	"1h", "2d"처럼 짧게
`from_now_during`	밀리초	그 시간 동안만 상대 시간, 그 뒤로는 `format`
`add` / `subtract`	`rx.MomentDelta(...)`	보여 줄 때만 날짜를 더하거나 뺀다
`tz`	`"Asia/Seoul"` 같은 시간대	그 시간대로 표시
`locale`	`"fr"` `"ko"` …	이 컴포넌트의 언어. 기본 `"en"`
`interval`	밀리초(0이면 멈춤)	주기적으로 다시 그리기
`with_title` / `title_format`		마우스를 올리면 보이는 전체 날짜와 그 형식
`diff` · `unit` · `decimal`		두 날짜의 차이
`duration` · `duration_from_now` · `trim`		흐른 시간 표시
`unix` · `parse` · `local`		입력 날짜 해석 방법, 지역 시각으로 출력
`on_change`	이벤트	처음 나타날 때와 날짜가 다시 그려질 때

상대 시간

날짜를 그대로 보이기보다 "얼마 전"인지가 더 읽기 쉬울 때가 많습니다. from_now는 지금부터 그 날짜까지("2 hours ago"), to_now는 반대 방향("in 2 hours")을 보여 줍니다. from_now_short는 "2h"처럼 줄입니다. from_now_during=100000이면 100초 동안만 상대 시간이고, 그 뒤로는 format대로 보입니다.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, from_now=True),
    rx.moment(MomentDateState.date_now, to_now=True),
    rx.moment("2026-01-01T09:00:00Z", from_now=True, from_now_short=True),
    rx.moment(MomentDateState.date_now, from_now_during=100000, format="YYYY-MM-DD HH:mm"),
)

형식

format으로 원하는 모양을 만듭니다.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, format="YYYY-MM-DD"),
    rx.moment(MomentDateState.date_now, format="HH:mm:ss"),
    rx.moment(MomentDateState.date_now, format="ddd, MMM D YYYY, h:mm A"),
)

날짜 더하고 빼기

add와 subtract에 rx.MomentDelta를 넘기면, State의 날짜는 그대로 두고 화면에 보일 때만 날짜를 옮깁니다. 키는 years, quarters, months, weeks, days, hours, minutes, seconds이고, Reflex 0.10에는 milliseconds도 있습니다. 왼쪽 열이 2씩 더한 것, 오른쪽 열이 2씩 뺀 것입니다.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.grid(
    *[
        rx.moment(MomentDateState.date_now, add=rx.MomentDelta(**{unit: 2}), format="YYYY-MM-DD - HH:mm:ss")
        for unit in ["years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"]
    ],
    *[
        rx.moment(MomentDateState.date_now, subtract=rx.MomentDelta(**{unit: 2}), format="YYYY-MM-DD - HH:mm:ss")
        for unit in ["years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"]
    ],
    rows="8",
    flow="column",
    column_gap="6",
    row_gap="1",
    width="max-content",
)

언어

rx.moment는 기본이 영어이고, locale을 준 컴포넌트만 그 언어로 바뀝니다. 다른 컴포넌트나 페이지에는 영향이 없습니다. 고정된 언어 이름을 주면 그 언어 파일만 불러오고, State 값을 주면 모든 언어 파일을 불러옵니다.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, format="dddd D MMMM YYYY"),
    rx.moment(MomentDateState.date_now, format="dddd D MMMM YYYY", locale="fr"),
    rx.moment(MomentDateState.date_now, format="LL dddd", locale="ko"),
    rx.moment(MomentDateState.date_now, from_now=True, locale="ko"),
)

시간대

tz를 주면 같은 순간을 그 지역의 시각으로 보여 줍니다. 형식의 z는 시간대 약자입니다.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, tz="America/Los_Angeles", format="YYYY-MM-DD HH:mm z"),
    rx.moment(MomentDateState.date_now, tz="Europe/Paris", format="YYYY-MM-DD HH:mm z"),
    rx.moment(MomentDateState.date_now, tz="Asia/Seoul", format="YYYY-MM-DD HH:mm z"),
)

브라우저에서 주기적으로 다시 그리기

날짜를 주지 않으면 브라우저의 지금 시각을 씁니다. interval(밀리초)을 주면 그 간격마다 다시 그려서 시계가 됩니다. 서버와 주고받지 않고 브라우저 안에서만 움직입니다.

rx.moment(interval=1000, format="HH:mm:ss")

on_change

on_change는 컴포넌트가 처음 나타날 때, 그리고 날짜가 다시 그려질 때마다 불리며 그 날짜 문자열을 넘깁니다. interval=0이어서 주기적으로 다시 그리지 않아도 처음 나타날 때 한 번은 불립니다. 새로고침이나 페이지 이동으로 다시 나타나면 또 불리고, 개발 모드에서는 React Strict Mode 때문에 처음에 두 번 불릴 수 있습니다. 스위치를 켜면 2초마다 불립니다.

on_change fired 0 times

class MomentTickState(rx.State):
    updating: bool = False
    ticks: int = 0
    last: str = ""

    @rx.event
    def on_moment_tick(self, date: str):
        self.ticks += 1
        self.last = date

    @rx.event
    def set_moment_updating(self, value: bool):
        self.updating = value


rx.vstack(
    rx.hstack(
        rx.moment(
            format="HH:mm:ss",
            interval=rx.cond(MomentTickState.updating, 2000, 0),
            on_change=MomentTickState.on_moment_tick,
        ),
        rx.switch(checked=MomentTickState.updating, on_change=MomentTickState.set_moment_updating),
        align="center",
    ),
    rx.text("on_change fired ", MomentTickState.ticks, " times", size="2"),
    rx.text(MomentTickState.last, size="1", color_scheme="gray"),
)

그 밖의 속성

공식 문서의 속성 표에만 있는 기능들입니다. 위에서부터 날짜 차이(일), 날짜 차이(월, 소수), 두 시각 사이에 흐른 시간, 그 날짜부터 지금까지 흐른 시간, 유닉스 시각(초) 해석, 정해진 형식으로 읽기(parse), 마우스를 올리면 전체 날짜가 보이는 상대 시간입니다.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment("2026-10-24", diff="2026-01-01", unit="days"),
    rx.moment("2026-10-24", diff="2026-01-01", unit="months", decimal=True),
    rx.moment(date="2026-10-24T12:00:00Z", duration="2026-10-24T09:30:00Z"),
    rx.moment("2026-01-01T00:00:00Z", duration_from_now=True, interval=1000),
    rx.moment("1767225600", unix=True, format="YYYY-MM-DD"),
    rx.moment("24/10/2026", parse="DD/MM/YYYY", format="YYYY-MM-DD"),
    rx.moment(MomentDateState.date_now, from_now=True, with_title=True, title_format="YYYY-MM-DD HH:mm:ss"),
)

주문서 완성

리뷰 아래에 상대 시간을 작게 두고, with_title로 마우스를 올리면 정확한 시각이 보이게 합니다. interval=30000이라 30초마다 "a few seconds ago"가 "a minute ago"처럼 저절로 바뀝니다.

Jin left a review

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.card(
    rx.hstack(
        rx.avatar(fallback="JK", size="3", radius="full"),
        rx.vstack(
            rx.text("Jin left a review", weight="bold", size="2"),
            rx.moment(
                MomentDateState.date_now,
                from_now=True,
                with_title=True,
                title_format="YYYY-MM-DD HH:mm",
                interval=30000,
                font_size="12px",
                color=rx.color("gray", 11),
            ),
            spacing="0",
        ),
        align="center",
    ),
    max_width="320px",
)

공방 노트

rx.moment(날짜, format="YYYY-MM-DD")로 형식을 바꾸고, from_now/to_now로 상대 시간.
add/subtract=rx.MomentDelta(days=2)는 보여 줄 때만 날짜를 옮긴다.
tz로 시간대, locale로 이 컴포넌트만의 언어(기본 영어).
날짜 없이 interval=1000이면 브라우저 시계. on_change는 처음 나타날 때도 불린다.

← 이전

데이터 표시 · Scroll Area

펼침과 전환 · Tabs

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex