위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기
포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.
시맨틱 슈거의 부재
이건 전에도 언급 된 내용이지만... 또 한번 말해보자면 select multiple인 경우에 문제가... 크다. 아래의 코드만잠깐 보고 넘어가도록 하자.
<select multiple value={flavours} onChange={onChangeFlavours}>
{menu.map((flavour) => {
return (
<option key={flavour} value={flavour}>
{flavour}
</option>
);
})}
</select>
const [flavours, setFlavours] = useState(["Mint choc chip"]);
function onChangeFlavours(event) {
const newFlavours = [];
const options = event.target.options;
for (let i = 0; i < options.length; i++) {
const option = options[i];
if (option.selected) {
newFlavours.push(option.value);
}
}
setFlavours(newFlavours);
}
위의 코드대로 option들이 선택 되었는지로 새로운 배열을 만들어서 처리하여야 한다... 다른 프레임워크 들에비해 너무 비효율 적이긴 하다.
위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.
아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.
댓글
댓글 쓰기