목록 그리기: rx.foreach

할 일 목록, 댓글, 상품 카드처럼 같은 모양이 여러 번 반복되는 화면은 리스트 데이터로 그립니다. 이번 교시에는 State에 있는 리스트를 화면에 그리는 rx.foreach를 씁니다.

3-1. rx.foreach로 목록 그리기 (3분)

class ListState(rx.State):
    items: list[str] = ["Apple", "Banana", "Cherry"]


def render_item(item: rx.Var[str]):
    # Render a single item.
    # Note that item here is a Var, not a str!
    return rx.list.item(item)


def show_fruits():
    return rx.list.unordered(
        rx.foreach(ListState.items, render_item),
    )

rx.foreach에는 두 가지를 넘깁니다.

1. 리스트 Var: ListState.items
2. 항목 하나를 그리는 함수: render_item. 괄호 없이 함수 자체를 넘깁니다.

Reflex가 리스트의 항목마다 render_item을 적용해 컴포넌트를 만듭니다. 나중에 리스트에 항목이 추가되거나 빠지면 화면의 목록도 함께 바뀝니다. 6교시의 과일 바구니에서 직접 확인합니다.

3-2. item은 문자열이 아니라 Var (2분)

render_item이 받는 item의 타입이 str이 아니라 rx.Var[str]인 점이 중요합니다.

• render_item도 화면 함수라서 앱을 켤 때 한 번만 실행됩니다. 그때는 리스트에 무엇이 들어 있을지 모르므로, item은 "나중에 채워질 값"을 가리키는 Var입니다.
• 그래서 len(item) 같은 파이썬 내장 함수는 쓸 수 없습니다. 대신 Reflex가 Var용으로 준비한 Var 연산을 씁니다. item.length()는 글자 수, item.upper()는 대문자로 바꾼 값입니다. 이것도 4교시의 주제입니다.

파이썬의 리스트 컴프리헨션 [rx.list.item(i) for i in ListState.items]도 같은 이유로 동작하지 않습니다. State의 리스트를 반복할 때는 항상 rx.foreach를 씁니다.

실습 과제

1. items에 과일을 두 개 더 넣고 화면에 나오는지 확인해 보세요.
2. render_item이 rx.list.item 대신 rx.badge(item)을 돌려주게 바꿔 보세요. 같은 데이터가 다른 모양으로 그려집니다.
3. 버튼을 눌러 items에 과일을 추가하는 이벤트 핸들러를 만들어 보세요. 정답은 6교시에 있습니다.

이번 교시 체크리스트

• rx.foreach에 넘기는 두 가지를 말할 수 있다.
• 항목을 그리는 함수가 받는 값이 Var인 이유를 안다.
• State의 리스트에는 리스트 컴프리헨션 대신 rx.foreach를 쓴다는 것을 안다.