VueJS - 인스턴스

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 Vue.js 인스턴스의 fascinering 세계로 뛰어들어 보겠습니다. 프로그래밍에 처음 도전하는 분이라면 걱정 마세요 - 저는 수업을 통해 수많은 학생들을 안내한 경험이 있으니 단계별로 천천히 설명해 드리겠습니다. 커피(또는 차, 당신이 좋아하는 음료로) 한 잔을 손에 들고, 시작해 보세요!

VueJS - Instances

Vue 인스턴스는 무엇인가요?

코드로 들어가기 전에 Vue 인스턴스가 무엇인지 이해해 보겠습니다. 집을 짓는 것을 생각해 보세요. Vue 인스턴스는 그 집의 기초와도 같습니다 - 모든 것의 시작점입니다. 이것은 Vue 애플리케이션 전체를 제어하는 핵심입니다.

문법

Vue 인스턴스를 만드는 것은 매우 간단합니다. 다음은 기본 문법입니다:

new Vue({
// 옵션
})

이렇게 간단합니다! new 키워드 뒤에 Vue()를 사용하고, 괄호 안에 여러 가지 옵션을 포함하는 객체를 전달합니다. 이 옵션들은 우리 집의 설계 도면과도 같습니다 - Vue가 우리의 애플리케이션을 어떻게 행동하도록 하고 싶은지 알려줍니다.

첫 Vue 인스턴스 만들기

우리가 첫 Vue 인스턴스를 함께 만들어 보겠습니다. 지금 이해가 되지 않아도 걱정 마세요 - 조금씩 설명해 나갈 테니까요.

예제 1

<!DOCTYPE html>
<html>
<head>
<title>내 첫 Vue 앱</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

출력

Hello, Vue!

이제 이를 조금씩 분해해 보겠습니다:

우리는 Vue.js 라이브러리를 HTML 파일에 포함시킵니다.
id가 "app"인 <div>을 만듭니다. 이곳에 Vue 애플리케이션이 살게 됩니다.
<div> 안에 {{ message }}를 사용합니다. 이는 인터폴레이션이라고 불리며, Vue에서 데이터를 표시하는 방법입니다.
<script> 태그 안에서 새로운 Vue 인스턴스를 만듭니다.
el: '#app'을 사용하여 Vue가 어떤 요소를 제어해야 하는지 알려줍니다 (id가 "app"인 우리의 div).
data 객체 안에서 message 프로퍼티를 정의하고, 값을 'Hello, Vue!'로 설정합니다.

Vue가 HTML에서 {{ message }}를 볼 때, 그것을 우리의 데이터에서 message의 값으로 바꿔줍니다. 마법이죠?

데이터와 메서드

Vue 인스턴스는 데이터만 있는 것이 아닙니다. 메서드도 있어 - 작업이나 계산을 수행할 수 있는 함수들입니다.

예제 2

<!DOCTYPE html>
<html>
<head>
<title>Vue 메서드 예제</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

출력

처음에는 "Hello, Vue!"와 버튼이 보입니다. 버튼을 클릭하면 메시지가 "!"euV ,olleH"로 뒤집어집니다.

이 예제에서:

우리는 버튼에 v-on:click="reverseMessage"를 추가했습니다. 이는 버튼이 클릭될 때 Vue가 reverseMessage 메서드를 호출하도록 합니다.
Vue 인스턴스 안에서 methods 객체를 추가하고, reverseMessage 함수를 정의합니다.
함수는 메시지를 문자 배열로 분리하고, 뒤집고, 다시 문자열로 결합합니다.
this.message를 사용하여 데이터 프로퍼티를 접근하고 수정합니다.

라이프사이클 훅

Vue 인스턴스는 라이프사이클을 가지고 있습니다 - 생성, DOM에 마운트, 업데이트, 그리고 마침내 소멸됩니다. Vue는 이 라이프사이클의 특정 단계에서 코드를 실행할 수 있도록 훅을 제공합니다.

예제

<!DOCTYPE html>
<html>
<head>
<title>Vue 라이프사이클 훅</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
created: function() {
console.log('Vue 인스턴스 생성됨!')
},
mounted: function() {
console.log('Vue 인스턴스 DOM에 마운트됨!')
this.message = 'Welcome to Vue!'
}
})
</script>
</body>
</html>

출력

브라우저에서는 "Welcome to Vue!"를 볼 수 있습니다. 콘솔에서는 다음 두 메시지를 볼 수 있습니다:

Vue instance created!
Vue instance mounted to the DOM!

이렇게 되는 이유는:

created 훅은 Vue 인스턴스가 생성될 때 실행됩니다. 우리는 콘솔에 메시지를 출력합니다.
mounted 훅은 Vue 인스턴스가 DOM에 마운트될 때 실행됩니다. 우리는 다른 메시지를 출력하고 message 데이터 프로퍼티를 변경합니다.

이 훅들은 특정 시점에서 코드를 실행하는 데 매우 유용합니다.

Vue 인스턴스 프로퍼티와 메서드

Vue 인스턴스는 내장된 프로퍼티와 메서드도 가지고 있습니다. 몇 가지를 살펴보겠습니다:

예제

<!DOCTYPE html>
<html>
<head>
<title>Vue 인스턴스 프로퍼티와 메서드</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="updateMessage">메시지 업데이트</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = 'Message updated!'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM updated!')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

이 예제에서:

우리는 this.$data를 사용하여 데이터 객체를 직접 접근합니다.
this.$el을 사용하여 Vue 인스턴스의 루트 DOM 요소를 출력합니다.
this.$nextTick을 사용하여 DOM이 업데이트된 후에 실행할 함수를 지연시킵니다.
Vue 인스턴스 밖에서 app.$data를 사용하여 인스턴스의 프로퍼티에 접근합니다.

여기서 몇 가지 흔히 사용되는 Vue 인스턴스 프로퍼티와 메서드를 표로 정리해 보겠습니다:

프로퍼티/메서드	설명
$data	Vue 인스턴스가 관찰하는 데이터 객체
$el	Vue 인스턴스가 관리하는 요소
$watch	Vue 인스턴스의 프로퍼티를 변경을 감시합니다
$set	객체에 프로퍼티를 설정하고 뷰 업데이트를 유도합니다
$nextTick	다음 DOM 업데이트 사이클 후에 콜백을 실행합니다

이것들만이 아닙니다. Vue.js에는 앞으로 배울 많은 기능과 기능들이 있습니다.

Vue 인스턴스에 대한 이 소개가 도움이 되길 바랍니다! 코드를 배우는 것은 새로운 언어를 배우는 것과 같습니다 - 시간과 연습이 필요합니다. 처음에는 이해가 되지 않을 수도 있지만, 실험을 계속하고, 코드를 계속 작성하며, 가장 중요한 것은 즐겁게 만들어 나가세요! 다음 강의에서 만나겠습니다!

Credits: Image by storyset