있다가 없다가: 조건부 렌더링

로그인했으면 "환영합니다", 안 했으면 "로그인하세요". 앱은 상태에 따라 다른 화면을 보여줘야 할 때가 많습니다. 이번 교시에는 State 값에 따라 화면을 바꾸는 rx.cond를 씁니다.

2-1. rx.cond로 화면 바꾸기 (3분)

class LoginState(rx.State):
    logged_in: bool = False

    @rx.event
    def toggle_login(self):
        self.logged_in = not self.logged_in


def show_login():
    return rx.box(
        rx.cond(
            LoginState.logged_in,
            rx.heading("Logged In", as_="h2"),
            rx.heading("Not Logged In", as_="h2"),
        ),
        rx.button("Toggle Login", on_click=LoginState.toggle_login),
    )

rx.cond는 인자 세 개를 받습니다.

• 세 번째 인자는 생략할 수 있습니다. rx.cond(LoginState.logged_in, rx.text("Welcome!"))라고 쓰면 로그인했을 때만 글자가 보이고, 아닐 때는 아무것도 보이지 않습니다.
• 핸들러 toggle_login은 1교시와 같은 이벤트 핸들러입니다. not으로 참과 거짓을 뒤집습니다.

2-2. 그런데 왜 그냥 if를 안 쓸까? (2분)

파이썬이라면 이렇게 쓰고 싶어집니다.

def show_login():
    if LoginState.logged_in:
        return rx.heading("Logged In", as_="h2")
    return rx.heading("Not Logged In", as_="h2")

이 코드는 동작하지 않습니다. 화면 함수는 앱을 켤 때 딱 한 번 실행되는데, 그때는 아직 사용자가 로그인했는지 알 수 없기 때문입니다. rx.cond는 "나중에 브라우저에서 값을 보고 고르라"는 지시를 화면에 심어 둡니다.

왜 이런 일이 생기는지는 4교시에서 자세히 풉니다. 지금은 "화면 코드에서 State 값으로 갈림길을 만들 때는 rx.cond"만 기억하세요.

실습 과제

1. show_login에서 버튼 글자도 상태에 따라 "Log In" / "Log Out"으로 바뀌게 해 보세요. 힌트: 버튼의 자식 자리에 rx.cond(...)를 넣습니다.
2. rx.cond는 props 값에도 쓸 수 있습니다. 제목의 color를 로그인했으면 "green", 아니면 "gray"로 바꿔 보세요.

이번 교시 체크리스트

• rx.cond의 세 인자가 각각 무엇인지 말할 수 있다.
• 세 번째 인자를 생략하면 어떻게 되는지 안다.
• 화면 코드에서 State 값으로 if를 쓰면 안 된다는 것을 안다.