위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.
아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.
오늘은 이벤트에 대해서 튜토리얼을 진행했다.
https://kr.vuejs.org/v2/guide/events.html
https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events
위의 내용만 같이 비교해봐도 될 정도이니 양이 그렇게 많지는 않다.
오늘은 svelte가 이벤트를 핸들링 하는 방식중에 눈에 띄는점이 두가지가 보였다.
1. 자연스러운 이벤트 버블
자식컴포넌트에서의 이벤트를 부모컴포넌트에게 전달하는 경우는 종종 있다. => 자식 이벤트를 본인을 걸쳐서 부모에게 이벤트를 전달하는 경우
위의 경우에서 자신이 해당 이벤트를 소비 할거라면 이벤트 리스너를 걸고, 부모에게만 전달 할 것이라면 위처럼만 작성하면 된다. 뭐 물론 둘다 아니라면 작성자체를 안하면 되지요.
자 그러면 뷰에서는 어떻게 해야 할까요?
뷰에서는 해당 이벤트를 $emit 함수를 이용 하여 전달은 해줘야 한다.
2. 자 이제 아래코드를 보자.
아... 이건 좀 실망 스러운 형태이다. 대부분의 컴포넌트들에서 이벤트를 상위로보내는 행위는 자주 일어난다. 뭐 물론 내가 뷰에 익숙한 상태여서 그럴지도... 이벤트 하나를 보내기 위해서 위처럼 svelte 라이브러리에서 이벤트 발생시키기 위해서 createEventDispatcher가져와서 createEventDispatcher를 실행해서 이벤트 발생기를 생성하고, 해당 그 발생기에 이벤트를 상세하게 입력하는 것은 엄... 한 가지일을 위해서 세 가지 일을 하는것은 꽤나 불편하겠지....
위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.
아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.
댓글
댓글 쓰기