위의 코드는 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)}> 2. 데이터 타입 - numeric 아래의 코드를 보자. setA를 호출 할 때에 event.target.value를 숫자로 형변환 시키는 것을 볼수 있다. 당연하게도 html의 사용자 입력 가능한 값들은 숫자라고 하더라도 문자열이라는 것을 알 것이다. vue의 경우에는 .number라는 키워드를 이용할 수 있지만... react는 처리가 아래처럼 해야 할것 같다. < input type = " number " value = {a} onChange = {(event) => setA ( + event . target . value )} min = " 0 " max = " 10 " /> 3. 데이터 타입 - reference < select value = {selected} onChan