왜 Vue.js를 사용할까?
- 현대 웹 페이지는 페이지 규모가 계속해서 커지고 있으며, 그만큼 사용하는 데이터도 늘어나고 사용자와의 상호작용도 많이 이루어짐
- 결국 Vanila JS만으로는 관리하기 어려움
- ex) '페이스북 친구가 이름을 수정했을 경우, 화면상에서 변경되어야 하는 것들'
- 타임라인의 이름, 페이스북 메시지 상의 이름, 내 주소록에서의 친구 이름 등
- -> 페이스북이 React를 개발한 이유
페이스북에서 유저의 이름 변경이 일어났을 때
Vanila
<body>
<label for="inputArea">userName: </label>
<input type="text" id="inputArea">
<hr>
<h1>안녕하세요 <span id="userName1"></span></h1>
<div>
<span id="userName2"></span>님의 친구목록
</div>
<div>
<span id="userName3"></span>님의 알림목록
</div>
<div>
<span id="userName4"></span>님의 친구 요청 목록
</div>
<script>
//1. 선택
const inputArea = document.querySelector('#inputArea')
const userName1 = document.querySelector('#userName1')
const userName2 = document.querySelector('#userName2')
const userName3 = document.querySelector('#userName3')
const userName4 = document.querySelector('#userName4')
userName1.innerText = 'Unknown'
userName2.innerText = 'Unknown'
userName3.innerText = 'Unknown'
userName4.innerText = 'Unknown'
//2. 이벤트 등록
inputArea.addEventListener('input', function (event) {
const newUserName = event.target.value
//3. 변경
userName1.innerText = newUserName
userName2.innerText = newUserName
userName3.innerText = newUserName
userName4.innerText = newUserName
})
</script>
</body>- 일일이 선택해서 변경해줘야함
Vue
<body>
<!-- MVVM - View -->
<!-- <p>{{ message }}</p> -->
<div id="app">
<!-- <p>{{ message }}</p> -->
<label for="inputArea">userName: </label>
<input v-on:input="onInputChange" type="text" id="inputArea">
<hr>
<!-- 3. DOM이 update(re-render) -->
<h1>안녕하세요 {{ userName }}</h1>
<div>
{{ userName }} 님의 친구 목록
</div>
<div>
{{ userName }} 님의 알림 목록
</div>
<div>
{{ userName }} 님의 친구 요청 목록
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// MVVM - ViewModel
const app = new Vue({
//1. DOM과 data 연결
el: '#app',
// MVVM - Model
data: {
userName: 'Unknown',
message: 'Hello Vue.js',
},
//2. Data가 바뀌면
methods: {
onInputChange: function (event) {
this.userName = event.target.value
}
}
})
</script>
</body>- Vue는 하나의 Data로 관리한다.
비교
Vanilla JS
- 한 유저가 작성한 게시글이 DOM 상에 100개 존재
- 이 유저가 닉네임을 변경하면, DB Update와 별도로 DOM상의 100개의 작성자 이름이 모두 수정되어야 함
- '모든 요소'를 선택해서 '이벤트를' 등록하고 값을 변경해야 함
Vue.js
- DOM과 Data가 연결되어 있고
- Data를 변경하면 이에 연결된 DOM은 알아서 변경
- 즉, 우리가 신경써야 할 것은 오직 Data에 대한 관리 (Developer Exp 향상)
내가 공부한 내용들이 누군가에게 도움이 될지 몰라서 쓰는 벨로그