😆 React 주니어의 Vue 전환기 Coming soon..

🤷‍♂️ 어쩌다 만난 그대.. Vue

 이번에 이직을 하게되며 React.js가 아닌 Vue.js기반을 사용하게 되었다.

더 나아가 검색최적화(SEO)를 위해 Nuxt.js를 도입할 예정이다 !

때문에 알아보는 간단 React와 Vue 차이점을 알아봅시다.

👏 React는 라이브러리이고 Vue는 프레임워크이다.

라이브러리와 프레임워크 차이를 모르신다면?

  네, 가장큰 차이점은 React는 라이브러리이고 Vue는 프레임워크입니다. 여기서 뜻하는 바는 React는 라이브러리인 만큼 자율성이 높아 구현하는 개발자들 특성에 따라서 구현, 구조의 차이가 있습니다. React는 JSX라는 문법으로 구현하지만 문법 내부에서 JS를 통하여 구현하는 자율도가 높은 반면 Vue는 Template형식으로 정해져있는 문법으로만 구현이 가능합니다.

아래는 간단한 예시입니다.

 만약 로딩상태에 보여주고싶은 Loading이라는 컴포넌트가 있다면 React에서는 아래와 같은 방법 또는 이외의 방법이 더 있습니다.

// && 연산자
<div>
	{isLoading && <Loading/>}
</div>

// 삼항 연산자
<div>
	{isVisible ? <Loading/> : null}
</div>

 Vue에서는 v-if라는 문법으로 아래와 같이 가능합니다.

<div>
	<Loading v-if="isLoading"/>
</div>

 또 리스트를 보여주고 todos가있을경우 React는 아래처럼 사용합니다.

<ul>
	{
            todos.map(todo => (
            	<li key={todo.id}>{todo.content}</li>
            ))
	}
</ul>

 이외에도 for, forEach등을 이용하여 구현이 가능합니다. 하지만 Vue에서는 v-for 문법으로 가능합니다.

<ul>
	<li v-for="todo in todos" :key="todo.id">{{todo.content}}</li>
</ul>

 위와 같은 차이점만을 가지고서라도 구현이나 접근성덕에 낮은 러닝커브를 이점으로 빠르게 배워서 SPA구현이 필요한 개발자들에게 더더욱 추천 해줄 프레임워크입니다.

 이외에 속도측면이나 타입스크립트 지원 부분에대한 차이점 등등 여럿 존재하나 링크로 남기고 이후 React와 Vue의 자세한 문법들을 알아보도록 하겠습니다.

React인가 Vue인가 ? - 캡틴판교

React 인가 Vue 인가?

2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 2 - 네이버 D2

2021.12.19 - [Vue] - 👏 Vue 시작하기 !