안녕하세요. 꿀발자입니다. 오늘은 현대 웹 개발에서 중요한 역할을 하는 Vuejs의 인스턴스와 컴포넌트에 대해 알아보겠습니다. Vuejs는 점점 인기를 끌고 있는 프론트엔드 프레임워크 중 하나로, 그 구조와 활용 방법을 이해하는 것은 웹 개발자에게 필수적입니다. 이번 포스팅에서는 Vuejs의 기본 구성 요소인 인스턴스와 컴포넌트의 개념을 쉽게 풀어 설명하고, 실제 코드 예제를 통해 그 사용법을 자세히 다루어 보겠습니다.
Vuejs 컴포넌트
Vuejs에서 컴포넌트는 재사용 가능한 코드의 조각을 의미합니다. 이는 웹 애플리케이션을 더 작은, 독립적이고 재사용 가능한 부분으로 나눌 수 있게 해주며, 각 부분은 독립적인 환경에서 개발하고 테스트할 수 있습니다. 컴포넌트 기반 아키텍처는 큰 프로젝트를 관리하기 쉽게 만들어 줍니다.
Vuejs 컴포넌트를 만들 때는 주로 다음과 같은 구조를 가집니다.
- 템플릿(Template): HTML과 같은 마크업 구조를 정의합니다.
- 스크립트(Script): 데이터, 메소드 및 기타 로직을 포함합니다.
- 스타일(Style): 컴포넌트의 CSS 스타일을 정의합니다.
Vuejs에서 컴포넌트 정의 방법은 간단합니다. Vue.component 메소드를 사용하여 컴포넌트 이름과 옵션 객체를 전달합니다.
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
컴포넌트는 HTML 태그처럼 사용할 수 있으며, 다른 컴포넌트 내부나 인스턴스의 템플릿에서 호출될 수 있습니다.
Vuejs 컴포넌트 통신
Vuejs에서 컴포넌트 간의 통신은 애플리케이션의 다양한 부분들이 서로 정보를 공유하고 조정할 수 있게 해줍니다. 기본적으로 두 가지 방식으로 통신할 수 있습니다
- Props: 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달합니다.
- Events: 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 발생시켜 정보를 보낼 수 있습니다.
// Parent component
Vue.component('todo-list', {
template: '<todo-item v-for="item in todos" :todo="item" />',
data: function() {
return {
todos: ['Milk', 'Eggs', 'Sugar']
}
}
})
// Child component
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo }}</li>'
})
Vuejs 인스턴스 옵션
Vuejs 인스턴스를 생성할 때 다양한 옵션을 설정할 수 있습니다. 이 옵션들은 Vuejs의 반응형 시스템에 어떻게 데이터가 저장되고 갱신되는지, 그리고 다른 UI 요소들과 어떻게 연동되는지를 정의합니다.
- 인스턴스의 data 옵션은 앱의 데이터를 저장하고, methods 옵션은 이 데이터를 조작하는 함수를 정의합니다.
- computed 속성은 데이터 변경에 따라 자동으로 갱신되는 값을 정의합니다.
- watch 옵션은 특정 데이터가 변경될 때 실행될 함수를 정의합니다.
new Vue({
el: '#app', //el속성 : view 인스턴스가 그려질 지점 지정
data : { //데이터 속성 : message 값 정의
message : 'Hello Vue.js!'
},
template: , // 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
methods : , // 화면 로직제어 관련 속성
created : // 뷰 인스턴스 생성되자마자 실행할 로직을 정의할 수 있는 속성
});
Vuejs 인스턴스 라이프 사이클
Vuejs 인스턴스의 라이프 사이클은 인스턴스의 생성부터 파괴까지 다양한 단계를 포함합니다. 각 단계에서 특정 코드를 실행할 수 있으며, 이를 이해하는 것은 앱의 행동을 제어하는 데 필수적입니다.
- created: 컴포넌트가 생성되고 반응형 시스템이 설정된 직후에 호출됩니다. 데이터 관찰, 이벤트/타이머 설정 등 초기화 작업에 적합합니다.
- mounted: 컴포넌트가 DOM에 부착된 후 호출됩니다. DOM을 조작하거나 외부 라이브러리를 연동할 때 사용합니다.
- updated: 컴포넌트의 데이터가 변경되어 재렌더링이 일어난 후 호출됩니다. 변경된 데이터에 따른 후처리 로직을 추가할 때 사용합니다.
- destroyed: 컴포넌트가 파괴되기 전에 호출됩니다. 이벤트 리스너 제거나 타이머 해제 등의 정리 작업을 수행합니다.
<template>
<div>
<h1>{{ message }}</h1>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue.js!"
};
},
created() {
console.log("Component created");
},
mounted() {
console.log("Component mounted");
},
updated() {
console.log("Component updated");
},
destroyed() {
console.log("Component destroyed");
},
methods: {
updateMessage() {
this.message = "Message updated";
}
}
}
</script>
<style>
/* 스타일을 여기에 추가하세요 */
</style>
이러한 라이프 사이클 훅은 Vuejs 인스턴스의 상태를 정확하게 제어할 수 있게 해주어, 데이터 바인딩, 조건부 렌더링, 리스트 렌더링 등 복잡한 특징들을 효과적으로 사용할 수 있게 도와줍니다.
References URL
Related Posts
https://honey-dev.com/vue-js-탄생-10주년-최신-동향/
https://honey-dev.com/프론트엔드-react-vue-angular-비교-2024/
https://honey-dev.com/웹-개발자가-알아야-할-최신-프론트엔드-기술/
Finally
오늘은 Vuejs의 인스턴스와 컴포넌트에 대해 자세히 알아보았습니다. Vuejs의 기본적인 구성 요소인 인스턴스와 컴포넌트를 이해하고, 컴포넌트간 통신 및 인스턴스 옵션과 라이프 사이클의 중요성에 대해 학습할 수 있었습니다. 이러한 기본적인 이해는 Vuejs를 사용하여 효율적이고 유지보수가 용이한 웹 애플리케이션을 구축하는 데 큰 도움이 될 것입니다.