[Vue3] Vue js란?

토이프로젝트도 만들겸 프론트엔드 공부를 해보자 생각해 대중적으로 사용하는 리액트랑 Vue 공부하며 정리하고자

글을 작성하게 됐다.

 

Vue js 란

• Vue는 웹에서 사용자 인터페이스를 프런트 엔드 JavaScript 프레임워크
• MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터 제어 로직을 분리
• SPA(Single Page Application)를 구축하는데 이용 가능

 

Vue js 장점

 

1. 새로운 개발자들이 배우기 쉬움

단순하고 직관적인 문법을 가지고 있어 배우기 쉽고 개발을 더 간편하게 할 수 있다.

2. 가상 DOM 랜더링 방식 사용

가상 DOM을 사용하여 효율적으로 렌더링을 구현하고, DOM 조작을 최소화하여 성능을 향상시킨다.

3. 양방향 데이터 바인딩 방식을 사용

양방향 바인딩이란, 데이터의 변경사항은 자동으로 view화면에 반영되며, 또한 view화면에서 사용자가 입력한 값을

데이터에 업데이트한다. (화면 ↔ 데이터)

양방향 바인딩은 데이터의 변화가 자동으로 화면에 반영되는 장점이 있어서 개발자가 데이터와 UI를 별도로

동기화할 필요가 없다.

 

Vue js가 인기 있는 이유(진입 장벽)

 

Vue.js가 인기 있는 가장 큰 이유는 쉬운 학습 곡선이라고 생각된다.

프론트엔드 개발에 주로 사용되는 프레임워크는 Vue js 외에도 React, Angular가 있다.

그 중 React는 가장 인기 있는 웹 프론트엔드 개발도구이지만, 새로운 JSX 문법을 익혀야하는 등 학습 난이도가 높지만 Vue js 기존에 html, css, javascript를 알고 있는 개발자라면, Vue js에 쉽게 적용할 수 있다.

React, vue 비교를 통한 진입 장벽 차이

밑에 if절을 사용하는 방식의 코드 비교를 보면 한 눈에 vue 쉽다는 것을 확인할 수 있다.

 

React if절

// React if절 1
funcation App() {
	const fnTest = () => {
    	if(true){
        	return <div>보임</div>
        }else{
        	return <div>안보임ㅋㅋ</div>
        }
    }
}

return (
	<div>{fnTest()}</div>
);

// React if절 2
funcation App() {
	return (
    	<>
           {
           	true
            ? <div>보임</div>
            : <div>안보임ㅋㅋ</div>
           }
        </>
    );
}

 

Vue if절

// Vue if절
<template>
  <div id="app">
    <div v-if="true">보임</div>
    <div v-if="false">안보임ㅋㅋ</div>
  </div>
</template>