1. Vue Component 통신
component로 화면을 구성합니다. 같은 웹 페이지안의 component라도 서로 데이터를 공유할 수 없습니다.
그 이유는 component 자체적으로 고유한 scope를 가지기 때문입니다. 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없습니다.
그러면 어떻게 해야 하나요?
2. 상, 하위 컴포넌트 관계일 경우
Vue가 가지고 있는 가장 기본적인 데이터 전달 방식은 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법입니다.
상위-하위 컴포넌트란 트리 구조에서 부모노드, 자식노드처럼 컴포넌트간의 관계가 부모, 자식으로 이루어진 컴포넌트를 의미합니다.
우리가 앞에서 살펴본 것처럼 인스턴스가 지역 혹은 전역 컴포넌트를 등록하면 등록된 컴포넌트는 자연스럽게 인스턴스의 하위 컴포넌트가 됩니다. 당연히 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 되는 것이구요.
다음의 그림은 Vue에서 상위-하위 컴포넌트간에 데이터를 전달하는 기본적인 구조를 나타냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<child-component v-bind:propsdata="message"></child-component>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const app = Vue.createApp({
name: 'App',
data() {
return {
message: '소리없는 아우성!!'
}
}
})
// 전역 컴포넌트 등록
app.component('child-component', {
data() {
return {}
},
props: {
propsdata: String
},
template: '<p>전달된 데이터는 : {{ propsdata }}</p>'
})
const vm = app.mount('#app')
</script>
</body>
</html>
3. 하위에서 상위 컴포넌트로 이벤트 전달하기
이벤트 발생과 수신에 대해서 알아보겠습니다. 앞에서 배운 props는 상위에서 하위 컴포넌트로 데이터를 전달하는 방식입니다.
그럼 반대로 하위 컴포넌트에서 상위 컴포넌트로의 통신은 어떻게 할까요? event를 emit시켜 상위 컴포넌트에 신호를 보내면 됩니다.
상위 컴포넌트에서는 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메소드를 호출하는 방식을 사용합니다.
여기서 아까 언급한 내용에 대해 첨언을 하자면 Vue는 공식적으로 event 발생 시 하위에서 상위로 데이터를 전달하는 방법을 다루지 않습니다. 이는 편리하긴 하지만 기본적인 단방향 데이터 흐름에 어긋나기 때문입니다. 따라서 이 경우에는 Event Bus라고 불리는 다른 방식을 사용할 것입니다.
이벤트 발생과 수신 형식을 알아보죠. 이벤트 발생과 수신은 $emit()와 v-on: 속성을 사용하여 구현합니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<child-component v-on:show-log="printText"></child-component>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const app = Vue.createApp({
data() {
return {
message: '소리없는 아우성!!'
}
},
methods: {
printText: function(...args) {
console.log(args[0]) // 100
console.log(args[1]) // Hello
console.log(args[2].msg) // 이벤트 전달 데이터
}
}
})
app.component('child-component', {
methods : {
showLog: function() {
// 이벤트를 발생시킬 꺼예요!
// 아까는 버튼을 눌러서 이벤트를 발생시켰는데
// 이번에는 프로그램적으로 이벤트를 발생시킬 꺼예요!
this.$emit('show-log', 100, 'Hello', {
msg : '이벤트 전달 데이터'
})
}
},
template: '<button v-on:click="showLog">클릭클릭!!</button>'
})
const vm = app.mount('#app')
</script>
</body>
</html>
4. 같은 레벨의 컴포넌트 간 통신
지금까지는 상위에서 하위로 props를 전달하고 하위에서 상위로 이벤트를 전달하는 내용에 대해서 알아봤습니다. 이번에는 상위-하위 관계가 아니라 같은 레벨에 있는 컴포넌트끼리 어떻게 통신하는지를 알아보죠.
그림으로 표현하면 다음과 같습니다.
5. 연습문제
component간 통신과 event전달에 대한 간단한 문제를 한 풀어보도록 하겠습니다.
아래 그림과 같이 화면을 구성하고 버튼을 클릭했을 때 입력상자안의 내용을 event 전달을 통해 상위 component로 전달하고 다시 props로 내려받아 특정 div에 해당 내용을 출력하는 예제입니다.
++ 힌트 소스코드!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<global-component-a></global-component-a>
<global-component-b></global-component-b>
</div>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const app = Vue.createApp({
data() {
return {}
}
})
app.component('global-component-a', {
template: `
<div>
<local-component-c></local-component-c>
<local-component-d></local-component-d>
</div>
`,
components: {
'local-component-c': {
template: '<div>Local Component C</div>'
},
'local-component-d': {
template: `
<div>
<div>Local Component D</div>
<div>전달된 데이터 : {{ }}</div>
</div>
`
},
}
})
app.component('global-component-b', {
template: `
<local-component-f></local-component-f>
`,
components: {
'local-component-f': {
template: `
<div>
<input type="text" id="inputText">
<button>클릭클릭</button>
</div>
`
}
}
})
app.mount('#app')
</script>
</body>
</html>
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 07-Vue.js / Single File Component (0) | 2024.06.09 |
|---|---|
| 06-Vue.js / Directive (0) | 2024.06.09 |
| 04-Vue.js / Component (0) | 2024.06.08 |
| 03-Vue.js / Instance (0) | 2024.06.08 |
| 02-Vue.js / 환경설정 (0) | 2024.06.08 |
1. Vue Component
component란 조합하여 화면을 구성할 수 있는 화면의 특정 영역을 가리키는 블록을 의미합니다.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 재 사용하기도 훨씬 편하게 됩니다.
일반적으로 Vue 화면을 구성할 때는 네비게이션바, 테이블, 리스트, 인풋 상자등과 같이 화면을 잘게 쪼개서 컴포넌트로 관리합니다. 간단하게 도식화된 것을 보죠.
위의 그림에서 알 수 있듯이 컴포넌트의 관계는 tree 구조와 유사합니다.
2. 컴포넌트의 등록
컴포넌트를 등록하는 방법은 크게 전역과 지역 두 가지가 있습니다. 지역 컴포넌트는 특정 component 안에서만 유효한 범위를 가지고 전역 컴포넌트는 application 인스턴스에서 공통으로 사용할 수 있습니다.
2.1 전역 컴포넌트
전역 컴포넌트는 application instance를 이용하여 등록합니다.
전역 컴포넌트를 등록하려면 application instance가 가지고 있는 .component()를 호출하여 수행하면 됩니다.
전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 형식이 있습니다.
컴포넌트 이름은 template 속성에서 사용할 수 있는 HTML 사용자 정의 태그이름을 의미합니다. 이때 태그이름은 가능한 모두 소문자 그리고 단어의 조합으로 되어있을 경우 케밥스타일로 하시는게 좋습니다. 하지만 강제적인 사항은 아닙니다. 파스칼 케이스를 적용할 수 도 있습니다.
두 가지 방법 모두 문제는 없지만, 웹 컴포넌트의 Custom Element 규격의 드래프트를 보면 하이픈으로 연결한 케밥 케이스를 기준으로 하고있습니다.
또한 Vue.js의 스타일 가이드에서는 여러 개의 단어로 구성된 컴포넌트 이름을 사용하는 것을 추천합니다.
그리고 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성합니다. 여기에는 template, data, methods 등의 인스턴스 옵션 속성을 정의할 수 있습니다.
2.2 지역 컴포넌트 등록
지역 컴포넌트의 등록은 전역 컴포넌트의 등록과는 다르게 component에 components 속성을 추가하고 등록할 컴포넌트의 이름과 내용을 정의하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button>일반 버튼이예요!</button>
<global-component></global-component>
<my-local-component></my-local-component>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const app = Vue.createApp({
name: 'App',
data() {
return {
message: '안녕하세요!'
}
},
components : {
'my-local-component' : {
data() {
return {
num : 0
}
},
template: '<div>지역이예요!!</div>'
}
}
})
// 전역컴포넌트를 등록해보아요!
// 첫번째 인자로 컴포넌트의 이름이 와요!
// 기본적으로 두단어 이상으로 구성되고 파스칼 케이스로 작성
// 두번째 인자는 당연히 컴포넌트 객체가 와요!
app.component('global-component',{
data() {
return {
msg: '글로벌이이예요!'
}
},
template: '<div>전역 컴포넌트 사용 : {{ msg }}<div>'
})
const vm = app.mount('#app')
</script>
</body>
</html>
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 06-Vue.js / Directive (0) | 2024.06.09 |
|---|---|
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 03-Vue.js / Instance (0) | 2024.06.08 |
| 02-Vue.js / 환경설정 (0) | 2024.06.08 |
| 01-Vue.js / Introduction (0) | 2024.06.08 |
1. Vue Instance 개요
이전 코드에서 Vue.createApp() 메소드를 호출하여 만들어진 객체를 application instance라고 부릅니다. 전체 component tree는 application instance를 mount할 때 렌더링 됩니다.
application instance를 그림으로 보면 다음과 같습니다 .
application instance를 생성할 때 root component instance가 인자로 전달되고 component안의 속성을 표현하는 것을 option 이라고 부릅니다.
2. data 옵션
data 옵션(data 함수)은 component가 관리하고 추적해야 할 데이터를 등록할 때 사용합니다. 데이터의 변경을 탐지하고 화면을 갱신하는 역할을 수행합니다.
data 옵션은 반드시 객체를 리턴하는 함수여야 합니다. Vue 2.x에서는 직접 객체를 지정하기도 했으나 3.x 부터는 함수가 사용되어야 합니다.
앞서 반응성에 관한 proxy에 대해서 알아봤는데 proxy가 만들어지는 시점은 component instance가 생성될 때 입니다. 따라서 component instance가 생성되고 관찰이 시작되면 반응성을 지닌 속성을 더이상 추가할 수 없습니다. 따라서 반응성을 가져야 할 데이터는 미리 속성으로 추가해야 합니다.
3. 생명주기 method
Vue component의 생명주기는 component가 생성된 후부터 component가 app component에서 제거될 때까지의 흐름을 말합니다. 각 생명주기마다 실행할 수 있는 event hook을 등록할 수 있습니다.
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 06-Vue.js / Directive (0) | 2024.06.09 |
|---|---|
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
| 02-Vue.js / 환경설정 (0) | 2024.06.08 |
| 01-Vue.js / Introduction (0) | 2024.06.08 |
케밥 num-data HTML
카멜 numData Jas
파스칼 NumData 뷰 컴포넌트
+++++++
환경설정
1. Chrome Browser, Vue.js devtools
chrome://extensions/
2. Code Editor (Visual Studio Code)
3. Vue Hello World!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 자바스크립트 객체를 하나 만들어요!
var model = {
message : '안녕하세요. Vue!!'
}
// Vue instance를 하나 만들어보아요!
// 일반적으로 application instance라고 해요!
var vm = Vue.createApp({
name: 'App',
data() {
return model
}
}).mount("#app")
</script>
</body>
</html>
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 06-Vue.js / Directive (0) | 2024.06.09 |
|---|---|
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
| 03-Vue.js / Instance (0) | 2024.06.08 |
| 01-Vue.js / Introduction (0) | 2024.06.08 |
1. Vue.js
Vue.js는 웹 페이지 화면을 개발하기 위한 Front-End Framework입니다.
다음그림은 Vue.js의 창시자인 에반 유(Evan You)가 2017년 Vue.js Conference에서 발표한 자료에서 사용한 그림입니다.
- Vue Core library : 화면단 데이터 표현에 대한 기능
- 컴포넌트 기반
- 프레임워크가 일반적으로 가지는 라우팅 기능 지원
- 프레임워크 기능인 상태 관리같은 기능도 쉽게 결합 가능
2. Vue.js와 다른 Framework의 차이
Front-End Web Application의 Framework시장은 React와 Angular가 높은 점유율을 차지하고 있습니다. 상대적으로 오래된 Framework이고 이미 많은 기업에서 도입해서 사용하고 있기 때문입니다.
Vue의 창시자인 에반 유는 원래 구글 엔지니어 였는데 이때 Angular를 사용했었습니다. Angular는 양방향 데이터 바인딩과 같은 수준높은 기능을 제공하지만 ES6, TypeScript와 같은 내용을 기본으로 알아야 사용할 수 있으며 프레임워크 구조 자체가 방대하고 복잡해 사용하기 쉽지 않습니다.
React 역시 Angualr와 유사한 상황입니다. ECMAScript 6를 배워야 하고 UI를 Template으로 처리하지 않고 JavaScript로 처리하기 때문에 상대적으로 JavaScript를 능숙하게 다룰 줄 알아야 합니다. 또한 Webpack과 같은 도구에 익숙해야 하죠. 이런 것들이 진입장벽을 높게 합니다.
그래서 Angular의 필수적인 요소들만 이용해서 새로운 화면을 구성하기 시작했고 이것이 오픈소스화 되어 프레임워크화 되면서 Vue.js가 탄생했습니다.
Vue.js는 2014년 2월 처음으로 배포되었습니다. 그래서 상대적으로 다른 프레임워크에 비해서 점유율이 아직은 낮은편이나 점점 높아지고 있는 추세입니다.
3. Vue.js 특징
3.1 사용하는 패턴
Vue는 UI 개발 방법론 중 하나인 MVVM 패턴의 ViewModel에 해당하는 화면단 라이브러리입니다.
MVVM 패턴은 화면을 Model - View - ViewModel로 구조화하며 개발하는 방식을 의미합니다.
3.2 컴포넌트기반 구현
Vue는 컴포넌트 기반의 프레임워크입니다.
화면을 컴포넌트로 구조화해서 개발한다는 의미입니다.
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 06-Vue.js / Directive (0) | 2024.06.09 |
|---|---|
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
| 03-Vue.js / Instance (0) | 2024.06.08 |
| 02-Vue.js / 환경설정 (0) | 2024.06.08 |
