[pynecone] component 알아보기 - 시작

 pynecone에는 여러가지 컴포넌트가 있다 당연하게도. 프론트의 여러 요소들을 나타내고, 아주 간단하게 호출해 구성할 수 있다. 파이썬 특유의 문법을 활용한다면 나와 같이 따로 프론트 관련 지식을 html과 css 수준만 알아도 SSR 풀스택 구성을 쉽고 빠르게 할 수 있다.

 컴포넌트는 대분류로 Typography, Forms, Layout, Navigation, DataDisplay, Graphing, Disclosure, Feedback, Media, Overlay, Other(html)이 있다.

 

Component의 공통적 특징

 pynecone의 컴포넌트는 모두 pynecone 모듈에서 불러와 사용한다.

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


class State(pc.State):
    """The app state."""

    pass


def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to Pynecone!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            pc.link(
                "Check out our docs!",
                href=docs_url,
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )


app = pc.App(state=State) 	# 앱 생성
app.add_page(index)         # 앱에 페이지 추가
app.compile()				# 앱 컴파일

 위 코드는 pc init으로 생성된 초기 코드이다. 살펴보면 모두 pc (pynecone을 pc로 치환) 모듈에서 불러온 컴포넌트를 사용하고 있다. 

 또, html 코드에서 볼법한 내용을 담고 있는데, border, padding 등의 css 속성과 hover 같은 이벤트도 보인다. 다만, html과 css의 표기방식과는 차이가 있다. 예컨대, border-radius는 pynecon에서는 border_radius로, onClick은 on_click으로 표기해야 한다. 기존의 camel case와 kebab case를 snake case로 변환하여 표기하여야 한다. 

 그리고 css, 이벤트 속성 외에도 각 컴포넌트 마다 고유한 속성을 가지고 있다. 

 

 이제 컴포넌트의 종류를 알아보자.

Typography

말 그대로 문자를 나타내는 컴포넌트. 

 Text, Heading, Span, Markdown

 

Forms

 html에서 form 태그 안에 들어가는 요소들로 구성되어 있다. 주로 정보입력에 관한 요소들이다.

 Button, CheckBox, Editable, FormControl, Input, NumberInput, PinInput, RadioGroup, RangeSlider, Select, Slider, Switch, TextArea

 

Layout

 요소들을 배치하는 레이아웃. div 태그에 미리 요소를 정렬하는 css가 가미되어있다고 보면 된다. 

 Box, Center, Cond, Container, Flex, Foreach, Grid, ResponsiveGrid, Spacer, Stack, Wrap

 

Navigation

 메뉴나 링크 등 페이지 네비게이션에 사용되는 요소

 Breadcrumb, Link

 

DataDisplay

 상태, 코드(!), 리스트, 테이블 등 데이터를 보기 쉽게 나타낼 수 있는 요소

 Badge, CodeBlock, Divider, DataTable, List, Stat, Table

 

Graphing

 그래프 차트를 표현하는 요소.

 Chart, Area, BoxPlot, Candlestick, ErrorBar, Line, Bar, Histogram, Pie, Polar, Scatter, Voronoi, Plotly

 

Disclosure

 콘텐츠를 하나로 묶어서 나누는 요소이다. 탭이나 누르면 펼쳐지는 아코디언이 있다.

 Accordion, Tab

 

Feedback

 사용자에게 상태 정보(로딩, 경고 등)를 알려주는 요소이다. 단, 팝업은 되지 않는 요소들이다.

 Alert, CircularProgress, Progress, Skeleton, Spinner

 

Media

 이미지 등을 나타내는 요소이다.

 Avatar, Image, Icon

 

Overlay

 사용자에게 화면 위에 그려지는 경고창 등으로 상태 정보를 알려주는 요소이다.

 AlertDialog, Drawer, Menu, Modal, Popover, Tooltip

 

Other

 html 코드를 그대로 넣을 수 있는 요소이다.

 Html 

 

 

 많은 듯 적은 듯 다양한 컴포넌트들이 있다. 다음 글부터는 Layout부터 시작하여 각 컴포넌트들을 자세하게 살펴볼 것이다. 공식문서를 보기 쉽게 정리해서 내가 보려고 만든다는 느낌으로 게시할 예정이다.