강의 개요

Reflex 앱을 만들 때 매일 쓰는 개념을 짧게, 직접 눌러 보며 익히는 강의입니다. 모든 예제 아래에 실제로 동작하는 화면이 붙어 있어서, 코드를 읽고 바로 눌러서 결과를 확인할 수 있습니다.

이 강의에서 배우는 것

• 버튼을 누르면 화면이 바뀌게 만들기 (State와 이벤트 핸들러)
• 조건에 따라 다른 화면 보여주기 (rx.cond)
• 리스트를 화면에 그리기 (rx.foreach)
• 화면 코드에서 if, for, len()을 쓸 수 없는 이유 (컴파일 타임과 런타임)
• 컴포넌트를 조립하고 꾸미기 (자식, props, 스타일)
• 앱과 페이지 만들기

왜 이 순서일까

Reflex 공식 문서는 컴포넌트와 스타일부터 차근차근 설명합니다. 이 강의는 순서를 바꿔 버튼을 눌러 숫자를 올리는 것부터 시작합니다. 화면이 반응하는 걸 먼저 보면 나머지 개념이 "이걸 하려면 필요한 것"으로 자연스럽게 이어지기 때문입니다.

1. 1교시에 숫자를 올리고, 2·3교시에 조건과 목록으로 화면을 바꿔 봅니다.
2. 4교시에서 "그런데 왜 그냥 if를 쓰면 안 되지?"라는 궁금증을 풉니다. 이 강의에서 가장 중요한 시간입니다.
3. 5교시에 원리를 안 상태로 화면을 꾸미고, 6교시에 배운 것을 모두 모아 작은 앱을 완성합니다.

준비물

• 파이썬 기초 문법(함수, 클래스, 리스트)
• Reflex가 설치된 개발 환경. 아직 없다면 Reflex로 시작하는 파이썬 풀스택 웹개발의 1교시를 먼저 따라 하세요.

이 페이지의 예제는 설치 없이 눌러 볼 수 있습니다. 직접 쳐 보고 싶다면 Reflex 프로젝트의 메인 파일에 예제 함수를 넣고 app.add_page(함수이름)으로 등록하면 됩니다.

원본 문서

이 강의는 Reflex 공식 문서 Getting Started › Basics를 바탕으로, 입문자에게 맞게 순서와 설명을 새로 구성했습니다. 예제 코드는 Reflex 0.10.0에서 실행해 확인했습니다.