위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기
포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.
느낌점은 아래와 같다.
오늘은 svelte가 이벤트를 핸들링 하는 방식중에 눈에 띄는점이 두가지가 보였다.
1. react에서 자식이 이벤트를 발생 시키는 방법은 없다. 부모가 자식에게 함수를 props로 전달하는 것을 자식이 적절한 순간에 실행 시켜주는 것으로 자식이 부모의 리스너를 해소 시켜 줄 수 있다.
코드는 아래와 같다. vue에서는 아래와 같은 코드를 좀 안좋게 보는 경향이 있고, 아래처럼 하지 않아도 된다.
위와 같은 방식을 사용 할 때에 자식 컴포넌트에 이벤트 리스너를 기본값을 생성 하여 함수를 전달 받지 않았을 때의 처리가 필수 처럼 보인다.
자 그러면 뷰에서는 어떻게 해야 할까요?
2. 아쉬운 점은 once키워드에 대한 부재이다. 한번만 실행 시키고 싶은 경우 addEventlistner의 once옵션을 이용 할 수 있다.
참 불편한 코드이다... 한번만 실행 되는 함수일 뿐인데...
위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.
아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.
댓글
댓글 쓰기