위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기
포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.
위의 코드를 작성하면서 JSX표현법이 꽤나 어색하다는 생각이 너무 들었다. 뭐 이부분은 차차 익숙해져나가면 괜찮은 부분이기에 패스하도록 하겠다. 하지만 아쉽게도 react도 루트엘리먼트는 하나여야 한다는 점에서 좀 아쉬움이 들었다.
svelte가 꽤나 react 스럽다라고 생각이 드는 부분이 많다. 그도 그럴것이 svelte와 마찬가지로 data, watch, methods, computed 등등 코드에는 불필요한 선언(?)들이 필요 없어서 코드들이 간결해짐이 있다.
따라서 첫인상에 대한 아래의 평도 Vue vs Svelte와 같은 평가(?)를 할 수 밖엔 없을 듯 하다.
react vs (vue, svelte)의 차이중에 지금 눈에 띄는 것은 Hook 정도인가? 싶긴 하다.
vue, svelte 둘다 변수를 선언하고 템플릿에 바인딩 되어있으면 값의 변경 반영이 된지만, react hook을 이용하면 useState를 사용해야 처리가 되는것은 개발자가 신경 써야 하는 부분이 생긴것 처럼 보인다.
또한 계산된 속성, watch를 처리할 수 있는 useMemo의 경우에도 좀 특이했다. useMemo의 두번째 인자로 어떤 값들의 변화에 의해 해당 평가를 처리할 것인지 의존할 인자를 정의 해주어야 한다. 이부분도 개발자가 신경 써야 하는 부분이 생긴것 처럼 보인다.
뭐 물론 신경쓸수 있는 부분이 더 늘어남으로써 개발자가 직접 최적화 할 수 있는 부분이 더 많아 진것으로 볼수도 있겠지만...
위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.
아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.
댓글
댓글 쓰기