위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기
포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.
1. 시맨틱 슈거의 부재
vue를 공부해본 사람이라면 v-model이라는 키워드를 들어보았을 것이다. v-model="foo"은 :value="foo" @input="foo = $event" 이와 같이 풀어 쓸수 있다는 것도 알 것이다. react의 바인딩에는 v-model과 같은 시멘틱 슈거가 존재하지 않는다.
무슨말이냐 하면 아래와 같은 코드를 사용해야 한다는 것이다.
<input type="text" value={foo} onChange={(event) => setFoo(event.target.value)}>
3. 데이터 타입 - reference
과연 selected가 두번째 옵션인 { a: 2 }의 값을 갖게 되면 selected는 무슨 값일까? 답은 문자열 "[object Object]"을 갖는다.
어느정도 이해도 가고 vue가 친절했던 것도 있긴 하지만, 아쉽긴하다.
위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.
아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.
댓글
댓글 쓰기