정리, 디버깅, 다음 단계

오늘 만든 앱은 상태(State) → 화면(Var) → 이벤트(핸들러) → 상태 변경이라는 하나의 고리로 돌아갑니다. Reflex 앱은 아무리 커져도 이 고리가 늘어날 뿐입니다.

6-1. 오늘 배운 것 한 표로 (5분)

증상	원인	해결
`TypeError: object of type '...Var' has no len()`	화면 함수에서 Var에 `len()`	`.length()`
`VarTypeError: Cannot convert Var ... to bool`	Var에 `if` / `and` / `or`	`rx.cond(...)`
`VarTypeError: Cannot iterate over Var`	Var에 `for`	`rx.foreach(...)`
`AttributeError: ... has no attribute 'set_xxx'`	자동 세터가 있다고 가정 (예전 자료)	`@rx.event`로 세터 직접 정의
취소 버튼을 눌러도 데이터가 추가됨	폼 안 버튼의 기본 type이 submit	`type="button"`
`TypeError: __init__() got an unexpected keyword argument`	입력의 `name`과 dataclass 필드 이름 불일치	이름을 똑같이 맞춤
대화상자가 열리지 않음	`open=`만 있고 `on_open_change` 없음	둘을 짝으로
차트가 비어 있음	차트 데이터를 채우는 시점이 없음	`on_load` 등록 또는 computed var

디버깅 습관 3가지

서버 터미널 로그를 먼저 봅니다. 핸들러에서 난 예외는 화면에 크게 드러나지 않고 터미널에만 찍힐 때가 많습니다.
uv run reflex compile --dry로 먼저 검사합니다. 서버를 띄우지 않고 화면 코드의 문법·Var 오류를 빠르게 찾습니다.
핸들러 안에 print()를 넣습니다. 핸들러는 서버에서 도는 파이썬이라 print(form_data)가 서버 터미널에 찍힙니다. 화면 함수 안의 print는 앱 시작 때 한 번만 찍힙니다.

난이도 순입니다. 각 과제는 오늘 배운 개념 하나를 더 깊게 씁니다.

삭제 버튼: 각 행 끝에 휴지통 아이콘(rx.icon("trash-2"))을 두고, 누르면 해당 고객을 지웁니다. 힌트: on_click=lambda: State.delete_user(user.email)처럼 인자를 넘깁니다.
검색: 이름 검색 입력칸을 만들고 value= + on_change=(제어 컴포넌트)로 연결한 뒤, computed var로 걸러낸 목록을 테이블에 보여줍니다. on_change=State.set_search.debounce(300)으로 입력이 멈춘 뒤에만 검색해 보세요.
입력 검증: 이메일 중복이나 형식 오류면 rx.toast.error를 돌려주고 대화상자를 닫지 않습니다.
영구 저장: SQLModel로 Customer 테이블을 만들고, on_load에서 읽고 add_user에서 씁니다. 새로고침이나 서버 재시작 후에도 고객이 남아 있어야 합니다. uv add "reflex[db]"로 설치하며, Reflex 0.10에서는 rx.Model 대신 SQLModel을 직접 쓰는 것이 권장입니다.

여러 페이지와 라우팅: @rx.page(route="/customers/[id]")처럼 동적 경로를 만들고 고객 상세 페이지를 추가합니다.
파일 분리: models.py, state.py, components/, pages/로 나눠 규모가 커져도 관리하기 쉽게 만듭니다.
배포: reflex run --env prod로 운영 모드를 확인하고, Reflex Cloud나 직접 서버(Docker)로 배포합니다.
공식 문서: reflex.dev/docs. 오래된 블로그 글은 자동 세터, rx.Model, rx.App(theme=...) 등 바뀐 API를 쓸 수 있으니 버전을 확인하고 읽습니다.