Pynecone tutorial: 추가버튼클릭시 인풋 컴포넌트 비우기

지난 포스팅까지,
파인콘 데모 갤러리에서 가장 쉬워 보이는
투두리스트에 대한 튜토리얼을 마쳤습니다.

2023.01.19 - [pynecone 튜토리얼] - Pynecone tutorial: Todo앱을 만들어봅시다.

2023.01.20 - [pynecone 튜토리얼] - Pynecone tutorial: Todo앱의 로직파트 작성하기

2023.01.21 - [pynecone 튜토리얼] - Pynecone tutorial: 투두리스트 스타일 매기기

그런데, 다른 투두리스트 앱을 사용해보셨거나
UX에 관심이 있는 분이시라면

아주 불편한 점 두 가지를 분명 느끼셨을 거라고 생각합니다.

①
꼭 버튼을 마우스로 클릭해야 하나?
할일 입력하고 엔터만 치면 바로 할일목록에 추가할 수 없을까?

②
추가버튼 클릭할 때 입력칸은 비워주면 좋겠다.
기존 할일을 지우고 쓰자니 불편하네!

결론부터 말씀드리면,
현재 버전에서는 둘 다 원활하게 지원되지는 않습니다.

①은 현재 키입력 관련 이벤트핸들러가 만들어져 있지 않습니다.
깃헙에 이와 관련한 이슈가 작년말에 올라왔는데, 

could potentially add this in the future...

서둘러 추가해줄 것 같지는 않습니다.
그래서 패스.

② 버튼 클릭시 인풋 컴포넌트를 비워주는 건
현재도 on_change 트리거를 통해 구현가능합니다.
그런데!!!

한글 특성상 여러 번의 키입력으로 한 글자가 조합(composite)되는데,
on_change 트리거는 키입력 한 번에 이벤트 하나를 발생시켜버리기 때문에
한글 입력시에 아래와 같이 글자가 깨지게 됩니다. (영문 입력시에는 문제가 없습니다.)
이 문제도 리액트의 컴포지션이벤트가 Pynecone에 도입되기 전까지는
어쩔 도리 없이 지켜봐야 할 것 같습니다.

아쉬운 대로,
추가버튼 클릭시 인풋을 지워지게 하는 전체 코드는
아래와 같습니다. (화살표 참고)

import pynecone as pc


class State(pc.State):
    items = ["아침먹고 땡", "점심먹고 땡", "저녁먹고 땡"]
    new_item: str
    input_string: str  # <--

    def add_item(self):
        if self.new_item:
            self.items += [self.new_item]
            self.new_item = ""

    def finish_item(self, item):
        self.items.remove(item)
        self.items = [i for i in self.items]

    def clear_input(self):      # <--
        self.input_string = ""  # <--


def render_item(item):
    return pc.list_item(
        pc.hstack(
            pc.button(
                on_click=lambda: State.finish_item(item),
                bg="white",
                border="1px solid blue",
                height="1em",
            ),
            pc.text(item),
        ),
        font_size="1.25em",
    )


def index():
    return pc.container(
        pc.vstack(
            pc.heading("할 일 목록"),
            pc.input(
                value=State.input_string,           # <--
                on_change=State.set_input_string,   # <--
                on_blur=State.set_new_item,
                placeholder=r"write down your to-do.",
                bg="white",
            ),
            pc.button("추가", on_click=State.add_item, on_mouse_up=State.clear_input, bg="white",),
            pc.ordered_list(
                pc.foreach(State.items, lambda item: render_item(item)),
            ),
            bg="#eeeeee",
            border_radius="1em",
            padding="1em",
            margin="1em",
            shadow="lg",
        ),
    )


app = pc.App(state=State)
app.add_page(index)
app.compile()

영문에서는 원활하게 작동합니다.

그럼 이번 포스팅은 여기서 마치겠습니다.
행복한 하루 되세요!

프레임워크에 아쉬운 부분이 전혀 없는 것은 아니지만,
고작 60여줄(!!)의 파이썬 코드로 
저 정도 퀄리티의 투두리스트를 만들어낼 수 있다는 것에
저는 개인적으로 정말 놀라기도 하고 만족했습니다.
열일중인 Pynecone 개발진과 기여자 분들께 깊이 감사드립니다.

 

 

---

국내 유일의 파이썬+한컴오피스 자동화 강의

움짤로 빠르게 배우는 파이썬-아래아한글 자동화 레시피 - 인프런 | 강의