모양 내기: 컴포넌트, props, 스타일

지금까지 rx.button, rx.heading, rx.box 같은 컴포넌트를 자연스럽게 써 왔습니다. 이번 교시에는 컴포넌트를 만들고, 조립하고, 꾸미는 규칙을 정리합니다. 규칙은 딱 두 개입니다.

5-1. 컴포넌트는 함수가 돌려주는 값 (1분)

컴포넌트는 버튼, 글자, 이미지처럼 화면을 이루는 조각입니다. Reflex에는 기본 컴포넌트가 많이 준비되어 있고, 컴포넌트를 돌려주는 함수를 만들면 나만의 컴포넌트가 됩니다.

def my_button():
    return rx.button("Click Me")

5-2. 규칙 1: 위치 인자는 자식 (2분)

컴포넌트 안에 다른 컴포넌트를 넣으려면 위치 인자로 넘깁니다. 아래에서 rx.text와 my_button()은 rx.box의 자식입니다. 다른 함수로 만든 컴포넌트도 그냥 불러서 넣으면 됩니다.

def my_container():
    return rx.box(
        rx.text("This is a page"),
        # Reference components defined in other functions.
        my_button(),
    )

원하는 컴포넌트가 없을 때는 rx.el로 HTML 태그를 그대로 쓸 수 있습니다. rx.el.div는 <div>, rx.el.p는 <p>입니다.

def my_div():
    return rx.el.div(
        rx.el.p("Use base html!"),
    )

그래도 부족하면 npm에 있는 React 컴포넌트를 감싸서 쓸 수도 있습니다.

5-3. 규칙 2: 키워드 인자는 props와 스타일 (2분)

컴포넌트의 동작과 모양은 키워드 인자로 정합니다. 이것을 props라고 합니다. 컴포넌트마다 고유한 props가 있으니, 처음 쓰는 컴포넌트는 문서에서 어떤 props가 있는지 확인하세요.

def half_filled_progress():
    return rx.progress(value=50)

컴포넌트 고유의 props 말고도, CSS 속성을 그대로 props로 넘겨 꾸밀 수 있습니다.

def round_button():
    return rx.button("Click Me", border_radius="15px", font_size="18px")

정리하면 컴포넌트는 자식과 props로 이루어집니다.

1교시에서 rx.heading(MyState.count, color=MyState.color)처럼 Var를 자식과 props 양쪽에 넣었던 것도 이 두 규칙 그대로입니다.

실습 과제

1. round_button에 color_scheme="green"과 size="3"을 더해 보세요.
2. my_container의 rx.box에 padding="16px", border="1px solid #ccc", border_radius="12px"를 줘서 카드처럼 만들어 보세요.
3. rx.progress의 value를 1교시의 CounterState.count로 바꾸면 어떻게 될까요? 버튼을 누를 때마다 막대가 차오르게 만들어 보세요.

이번 교시 체크리스트

• 위치 인자와 키워드 인자가 각각 무엇이 되는지 말할 수 있다.
• CSS 속성을 snake_case props로 바꿔 쓸 수 있다.
• 필요한 컴포넌트가 없을 때 rx.el을 쓸 수 있다.