마지막 교시입니다. 지금까지 만든 화면 함수를 실제 웹 주소에 연결하는 방법을 보고, 1~5교시에 배운 것을 모두 모아 작은 앱 하나를 완성합니다.
Reflex 앱은 rx.App으로 만들고, 화면 함수를 add_page로 웹 주소(route)에 연결합니다.
def index():
return rx.text("Root Page")
app = rx.App()
app.add_page(index, route="/")app = rx.App()은 메인 파일의 맨 바깥에 있어야 합니다. Reflex가 app이라는 이름으로 앱을 찾습니다.route="/"는 사이트의 첫 화면입니다. app.add_page(about, route="/about")처럼 페이지를 계속 더할 수 있습니다.route를 생략하면 함수 이름이 주소가 됩니다. index는 /, about은 /about입니다.버튼으로 과일을 넣고 빼는 바구니입니다. 짧지만 이 강의의 개념이 모두 들어 있습니다.
FRUITS = ["Apple", "Banana", "Cherry", "Grape", "Mango", "Peach"]
class BasketState(rx.State):
basket: list[str] = []
@rx.event
def add_fruit(self):
# Event handlers run real Python: pick the next fruit in the list.
self.basket.append(FRUITS[len(self.basket) % len(FRUITS)])
@rx.event
def remove_last(self):
if self.basket:
self.basket.pop()
def fruit_basket():
return rx.vstack(
rx.hstack(
rx.heading("My basket", as_="h2", size="5"),
# Var operations: .length() and % work on vars in components.
rx.badge(BasketState.basket.length()),
rx.cond(
BasketState.basket.length() % 2 == 0,
rx.badge("even", color_scheme="green"),
rx.badge("odd", color_scheme="orange"),
),
align="center",
),
rx.cond(
BasketState.basket.length() > 0,
rx.list.unordered(rx.foreach(BasketState.basket, rx.list.item)),
rx.text("The basket is empty.", color_scheme="gray"),
),
rx.hstack(
rx.button("Add fruit", on_click=BasketState.add_fruit),
rx.button("Remove last", on_click=BasketState.remove_last, variant="soft"),
),
align="start",
)
app = rx.App()
app.add_page(fruit_basket, route="/")localhost:3000
직접 눌러 보세요The basket is empty.
코드의 각 부분이 어느 교시에서 배운 것인지 짚어 봅니다.
| 코드 | 개념 | 교시 |
|---|---|---|
basket: list[str] = [] | 바뀌는 데이터를 담는 State var | 1교시 |
on_click=BasketState.add_fruit | 이벤트 트리거와 핸들러 | 1교시 |
rx.cond(... > 0, 목록, "empty") | 조건부 렌더링 | 2교시 |
rx.foreach(BasketState.basket, rx.list.item) | 리스트 렌더링. 컴포넌트 함수를 그대로 넘겨도 됩니다 | 3교시 |
핸들러 안의 len(self.basket), if | 런타임의 진짜 파이썬 | 4교시 |
화면의 .length(), % 2 == 0 | 컴파일 타임에 쓰는 Var 연산 | 4교시 |
variant="soft", color_scheme="gray" | props로 꾸미기 | 5교시 |
app.add_page(fruit_basket, route="/") | 페이지 등록 | 6교시 |
같은 len이 핸들러에서는 되고 화면에서는 .length()로 바뀐다는 점을 눈여겨보세요. 4교시의 "언제 실행되지?" 질문에 답할 수 있으면 Reflex의 기본기는 다 갖춘 것입니다.
기본기를 갖췄으니 이제 진짜 앱을 만들어 볼 차례입니다.
add_fruit를 고쳐 보세요. 핸들러 안이니 if fruit not in self.basket을 쓸 수 있습니다.rx.cond를 씁니다.rx.App과 add_page로 페이지를 등록할 수 있다.더 배우고 싶다면
제휴 링크이 강의 다음에 이어서 보기 좋은 강의입니다. 제휴 링크라서 이 링크로 수강하면 ReflexKR에 수수료가 돌아가고, 수강료는 똑같습니다. 고르는 기준
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.