맨동이

컴포넌트 - Refs 1.1 개념 비록 props와 이벤트가 존재하지만, 가끔은 자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다. mounted() { const h1El = document.querySelector('#hello') console.log(h1El.textContent) } 원래의 경우라면 위처럼 DOM API를 사용하게 됩니다. 하지만 참조하겠다는 의미의 ref 라는 속성을 사용하면 해당 기능을 간단하게 사용할 수 있습니다. 1.2 Refs 사용 예시 //App.vue Hello world! export default { mounted() ..

1. Provide & Inject 1.1 개념 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용합니다. 특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가 있는 구조의 경우 하위 컴포넌트에서 상위 컴포넌트의 무언가가 필요한 경우를 상상해보십시오. 이 경우에 두 컴포넌트 사이의 모든 컴포넌트에 prop를 전달해야하므로 굉장히 번거로울 것입니다. 이러한 경우 provide와 inject 쌍을 사용할 수 있습니다. 부모 컴포넌트는 컴포넌트 계층 구조의 깊이와 상관없이 모든 자식에 대한 종속성 제공자 역할을 할 수 있습니다. 이 기능은 2개의 부분으로 구성됩니다: 부모 컴포넌트는 데이터 제공을 위해 provide 옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject 옵션을 사..

컴포넌트 - Slot 1. Slot 1.1 Fallback Contents //App.vue(부모 컴포넌트) Cherry export default { components: { MyBtn } } //MyBtn.vue(자식 컴포넌트) slot의 태그로 부모 컴포넌트에서 받을 데이터의 자리를 표시하면 Cherry라는 텍스트를 화면에 출력할 수 있었습니다. 하지만 여기서 slot 태그 내에 내용을 입력할 수 있습니다. //App.vue(부모 컴포넌트) //MyBtn.vue(자식 컴포넌트) Apple slot 태그 내에 텍스트를 입력하면, 그 내용이 출력됩니다. 하지만 부모 컴포넌트에 내용이 없을 경우에만 출력되며, 부모 컴포넌트에 텍스트가 있다면 해당 내용이 출력됩니다. 이렇게 slot 태그 내에 입력한 컨텐..

컴포넌트 - Emit 1. 이벤트 상속 //App.vue(부모 컴포넌트) Banana export default { components: { MyBtn }, methods: { log() { console.log('Click!!') } } } //MyBtn.vue(자식 컴포넌트) export default { inheritAttrs: false } MyBtn 태그에 클릭 이벤트 발생시에 실행할 method를 연결하였습니다. 그러나 @click이라는 속성으로 연결을 하였기 때문에 자식 컴포넌트에 inheritAttrs: false 값으로 인해 클릭을 하여도 method가 실행되지 않습니다. 자식 컴포넌트에 최상위 요소가 2개 이상이고 inheritAttrs 옵션을 사용해야하는 경우라면 이벤트를 적용할 수 ..

컴포넌트 - 속성 상속 1. 속성 상속 1.1 클래스 상속 //App.vue(부모 컴포넌트) Banana //MyBtn.vue(자식 컴포넌트) // 최상위 요소(Root Element) 부모 컴포넌트의 html 요소에 class 속성으로 값을 입력한 경우, 자식 컴포넌트의 btn이라는 클래스에 상속이 됩니다. 이러한 개념을 속성 상속이라고 합니다. //MyBtn.vue(자식 컴포넌트) // 최상위 요소(Root Element) // 최상위 요소(Root Element) 하지만 자식 컴포넌트에 template 태그 안에 있는 최상위 요소가 2개 이상일 경우에는 부모 컴포넌트에 입력한 속성 값이 어느 부분에 상속이 되어야하는지 판단할 수 없기 때문에 두 요소 모두 상속이 되지 않습니다. 1.2 스타일 상속 ..

컴포넌트 기초 1. 컴포넌트 기본 구성 1.1 App.vue // 컴포넌트 렌더링 1.2 MyBtn.vue Apple 2. 컴포넌트의 특징 2.1 재활용 컴포넌트의 장점이라고 한다면, 컴포넌트는 얼마든지 반복해서 재사용할 수 있다는 것입니다. App.vue 파일에 위와 같이 작성한다면 버튼을 재활용하여 여러 개를 화면에 출력할 수 있기 때문입니다. 2.2 Props 또한, 재활용을 하면서 props라는 개념을 이용하여 App.vue라는 부모 컴포넌트에서 MyBtn.vue라는 자식 컴포넌트로 데이터를 전달할 수 있습니다. 이러한 이유로 props를 통해 구현한 이 기능을 부모 컴포넌트와 자식 컴포넌트 간의 데이터 통신 방법이라고도 이야기합니다. //App.vue //MyBtn.vue // 데이터 바인딩 A..

폼 입력 바인딩 폼 입력 바인딩은 v-model 이라는 디렉티브를 사용하여 양방향 데이터 바인딩을 생성합니다. 1. 단방향 데이터 바인딩 {{ msg }} export default { data() { return { msg: 'Hello world!' } } } 위와 같이 데이터를 스크립트 태그로 연결하여 Vue에서 활용할 수 있었습니다. 이렇게 데이터를 출력하는 방법을 단방향 데이터 바인딩이라고 합니다. 데이터에서 html 쪽으로 한 방향으로만 흐르기 때문에 단방향 데이터 바인딩이라 부릅니다. 단방향 데이터 바인딩으로 인하여 input 요소를 수정한다하더라도 수정된 내용이 msg 데이터를 갱신하지 않습니다. 2. 양방향 데이터 바인딩 {{ msg }} 이처럼 input 요소에 이벤트를 청취하도록 합니..

이벤트 수식어 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋습니다. 이 문제를 해결하기 위하여, Vue는 v-on이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 된 접미사 입니다. .stop .prevent .capture .self .once .passive ... ... 관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시 말하여 v-on:click.prevent.self를 사용하면 모든 클릭을 막을 수 있으며 v-on:c..

이벤트 핸들링 1. 이벤트 청취 v-on 디렉티브는 @기호로, DOM 이벤트를 듣고 트리거될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="methodName" 혹은 줄여서 @click="methodName"으로 사용합니다. Add 1 The button above has been clicked {{ counter }} times. Vue.createApp({ data() { return { counter: 1 } } }).mount('#basic-event') 2. 메소드 이벤트 핸들러 위의 코드와 같이 간단한 코드의 경우에는 문제가 없지만, 많은 이벤트 핸들러의 로직은 더 복잡하기 때문에 위와 같은 방법은 지양하는 것이 좋습니다. Greet Vue.createApp({ dat..

리스트 렌더링 1. v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 fruit in fruits 형태로 특별한 문법이 필요합니다. 여기서 fruits는 원본 데이터 배열이고 fruit은 반복되는 배열 엘리먼트의 별칭입니다. {{ fruit }} 1.1 코드 v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공합니다. {{ fruit }}-{{ index }} 2. 필터링된 결과 표시 2.1 computed 속성 원래 데이터를 실제로 변경하거나 재설정하지 않고, 배열의 필터링되거나 정렬된 버전을 표시할 수도 있습니다. 이 경우 필터링되거나 정렬된 배열을..