1.$refs (vue2) 2. ref (vue3)

1. resolveComponent() 등록된 컴포넌트를 수동으로 확인한다. 컴포넌트를 찾을 수 없는 경우 런타임 에러가 발생한다. 2. 사용 예시 resolveComponent()를 통해 ``라는 컴포넌트가 있는지 확인하고 가상 노드를 생성해 리턴한다.

1. h() h()는 가상 DOM 요소를 생성하는데 사용된다. 요소의 타입(필수), 속성, 자식 노드를 인수로 사용된다. 2. 사용 예시 h()를 통해 ` 요소를 생성하고, 'app'이라는 id` 속성을 부여한다. `과 ` 요소가 자식 노드로 추가된다.

변수 num1의 데이터 변경 후 이벤트를 발생하고 싶은데 하단 코드에선 발생하지 않는다. dispatchEvent()를 통해 이벤트를 강제로 발생시킬 수 있다.

1. 자식 컴포넌트 슬롯에 프로퍼티 작성 `에 name과 age` 프로퍼티를 작성한다. 2. 부모 컴포넌트에서 해당 프로퍼티 사용 `를 통해 프로퍼티를 받아 ` 영역 안에서 사용할 수 있다. 📍 슬롯에 이름이 있는 경우 아래와 같이 사용 name을 통해 슬롯명을 설정할 수 있다.

prop drilling을 방지하기 위한 메서드 provide : 부모 컴포넌트에서 데이터 제공 inject : 자식 컴포넌트에서 데이터 주입

`` 컴포넌트는 빌트인 컴포넌트이므로 등록하지 않고도 템플릿 내에서 사용 가능하다. 컴포넌트 애니메이션은 아래 조건 중 하나라도 충족하면 발생한다. v-if를 통한 조건부 렌더링 v-show를 통한 조건부 표시 ``를 통해 전환되는 동적 컴포넌트 트랜지션명이 name prop으로 지정된 경우, 트랜지션 클래스에는 v 대신 이름이 접두사로 붙는다. e.g. v-enter-active -> fade-enter-active 자바스크립트 훅을 통해 `` 컴포넌트의 이벤트를 수신하여 프로세스에 연결할 수 있다. onBeforeEnter : 엘리먼트가 DOM에 삽입되기 전에 호출

슬롯은 템플릿 조각을 자식 컴포넌트에 전달하여 자식 컴포넌트가 자체 템플릿 내에서 조각을 렌더링하는 것이다. 최종 렌더링은 아래와 같이 된다. 1. 이름이 있는 슬롯 name이라는 속성으로 컨텐츠가 렌더링되어야 하는 위치를 결정할 수 있다. name 속성이 없다면 기본적으로 default란 이름을 갖는다. 이름이 있는 슬롯을 전달하려면 부모 컴포넌트에서 ` 엘리먼트와 함께 v-slot 디렉티브를 사용하고 슬롯명을 v-slot` 인자로 전달해야 한다. `v-sl

폴스루(fallthrough: 대체) 속성 부모 컴포넌트에서 속성 또는 v-on 이벤트 리스너를 전달하고 이것을 받는 컴포넌트의 props 또는 emits에 선언하지 않는 속성 일반적으로 class, style, id 속성이 있다. 컴포넌트가 엘리먼트를 렌더링하면 폴스루 속성이 루트 엘리먼트의 속성에 자동으로 추가한다. 1. class 병합 아래 ``의 템플릿이 아래와 같이 구성되어 있다. 부모 컴포넌트에서 ` 컴포넌트에 class` 속성을 추가하면, 렌더링했을 때 `` 템플릿은 아래와 같다. 💡 class, style, id 모두 동일하게 병합된다. --

컴포넌트에서 v-model 디렉티브를 사용하기 위해선 2가지 작업을 수행해야 한다. `` 예시로 작성해보자면, 네이티브 ` 엘리먼트의 value 속성을 modelValue` 프로퍼티에 바인딩한다. 네이티브 input 이벤트가 트리거되면 새로운 값으로 update:modelValue 사용자 지정 이벤트를 내보낸다. 실제 작동하는 코드는 아래와 같다. 이제 v-model 이 부모 컴포넌트에서 완벽하게 동작한다. 1. v-model Arguments 컴포넌트의 v-model은 modelValue를 프로퍼티로, update:modelValue를 이벤트로 사용한다. v-model에 인자를 전달하

1. 이벤트 발신 및 수신 컴포넌트는 내장 메서드 $emit을 사용하여 v-on 디렉티브 등에서 사용자 정의 이벤트를 발신할 수 있다. $emit 메서드는 컴포넌트 인스턴스에서 this.$emit()으로도 사용할 수 있다. 부모 컴포넌트는 v-on 디렉티브를 사용하여 수신할 수 있다. .once 수식어는 컴포넌트 이벤트 리스너에서도 지원된다. .once : HTML 코드로 출력이 된 이후 값에 변화가 있더라도 처음 출력한 값을 유지 컴포넌트 및 props와 마찬가지로 이벤트명은 자동 대소문자 변환을 제공한다. 위 예제에서 camelCase 형식으로 이벤트를 발신했지만 부모 컴포넌트에서 kebab-case 형식의 리스너를 사용하여 수신할 수

props는 컴포넌트를 사용할 때 데이터를 전달하기 위해 사용한다. 1. props 선언 props는 props 옵션을 사용하여 선언한다. 객체 선언 문법 key : props의 이름 value : 값이 될 데이터의 타입에 해당하는 생성자 함수 (String, Number ...) 2. props 네이밍 kebab-case를 사용하면 아래와 같이 작성해야 하는 번거로움이 있기 때문에 camelCase를 사용한다. kebab-case 작성 : obj['kebab-case'] camelCase 작성 : obj.camelCase 기술적으로 props를 자식 컴포넌트에 전달할 때 camelCase를 사용할

전역 컴포넌트는 app.component() 메서드를 통해 등록할 수 있다. 예제를 진행하기에 앞서 components 폴더에 GlobalComponent.vue를 생성하고 아래와 같이 작성한다. src 폴더에 main.js에 아래와 같이 작성한다. const app = createApp(App) createApp(컴포넌트) : 전달된 옵션은 최상위 컴포넌트를 구성하는데 사용된다. app.component('GlobalComponent', GlobalComponent) app.component(컴포넌트) : 전역 컴포넌트를 등록한다. 📌 전역 컴포넌트를 여러개 등록하고 싶다면 아래와 같이 작성하면 된다. 전역

탭 인터페이스와 같이 컴포넌트 간에 동적으로 전환하는 것이 유용한 경우가 있다. `` 엘리먼트를 통해 동적으로 컴포넌트를 생성할 수 있는데 아래 예제를 통해 확인해보자. App.vue(부모 컴포넌트)에 아래와 같이 작성한다. src/components 폴더 안에 컴포넌트 파일을 아래와 같이 생성하고 ``을 작성한다. 부모 컴포넌트에서 v-for 디렉티브를 통해 tabs의 길이만큼 ``엘리먼트를 생성한다. :class="['tab-button', { active: currentTab === tab }]" 배열을 통해 class를 여러개 지정할 수 있다. currentTab과 tab이

1. 컴포넌트 UI를 독립적이고 재사용 가능한 각각의 독립된 모듈 2. 컴포넌트 정의 일반적으로 싱글 파일 컴포넌트(Single File Component; SFC)라고 하는 .vue 확장자를 사용해 각 파일에 해당 컴포넌트를 정의한다. 자식 컴포넌트를 사용하려면 부모 컴포넌트에서 가져와야 한다. (e.g. 부모 컴포넌트 : App.vue, 자식 컴포넌트 : ChildComponent.vue) 자식 컴포넌트를 가져와 템플릿에 정의하려면 ` 안에서 componen

1. Computed 템플릿 안에서 연산을 하게 되면 가독성이 떨어지고 유지보수가 어려워진다. 템플릿에서 사용할만한 로직은 일반적으로 computed에서 사용한다. computed는 default로 getter() 함수가 있지만 필요에 의해 setter() 함수를 설정할 수 있다. 🧐 computed와 methods 사용하는 방법이 같은데 차이점이 뭘까? computed 종속 대상을 캐싱한다. 그래서 종속 대상이 변경될 때만 함수를 호출한다. e.g. reverseArr의 종속 대상은 arr arr의 값이 바뀌지 않는다면 reverseArr를 여러번 호출해도 다시 계산하지 않고 캐싱한 결과를 즉시 반환한다. `met

1. v-model 디렉티브 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 작업을 단순화한다. ` `에서도 사용 가능 사용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장 텍스트 유형의 ` : value 속성과 input` 이벤트 사용 `과 : checked 속성과 change` 이벤트 사용 ` : value 속성과 change` 이벤트 사용 v-model은 문자열이 아닌 값의 바인딩도 지원한다. (3. 값 바인딩 - select 예제 참고)

일반적으로 v-on 디렉티브는 @ 기호를 사용하여 단축 v-on:click="handler" 또는 @click="handler"와 같이 사용 핸들러 종류는 총 2가지 입니다. 인라인 핸들러 : 이벤트가 트리거될 때 실행되는 인라인 자바스크립트 메서드 핸들러 : 컴포넌트에 정의된 메서드명 또는 메서드를 가리키는 경로 1. 인라인 핸들러 인라인 핸들러는 일반적으로 아래와 같이 간단한 경우에만 사용된다. 2. 메서드 핸들러 일반적으로 로직이 많고 복잡할 때 사용된다. 3. 인라인 핸들러에서 메서드 호출 네이티브 이벤트 객체 대신 사용자 인자를 메서드에 전달할 수 있다. 4. 인라인 핸들러에서 이벤트 객체

1. 메서드 수정 메서드 : push(), pop(), shift(), unshift(), splice(), sort(), reverse() 배열 교체 메서드 (새 배열 반환) : filter(), concat(), slice() 새 배열을 반환한다고 다시 렌더링되는 것은 아니다. Vue는 DOM 엘리먼트 재사용을 최대화하기 위해 몇가지 스마트 휴리스틱을 구현하여서 이전 배열을 다른 배열로 바꾸는 과정에서 서로 중복되는 객체를 매우 효율적으로 처리한다. 2. 필터링 / 정렬 결과 표시 아래 예제는 filter() 메서드를 사용해 2 4가 출력되는 코드이다. **📌 reverse()와 `sort

v-for 디렉티브를 통해 배열을 리스트로 렌더링 v-for 범위 내 모든 속성 접근 가능 현재 아이템의 index를 제공 v-for의 아이템을 분해 할당해 사용할 수 있다. in 대신 of를 사용하여 자바스크립트 반복문 문법처럼 사용할 수 있다. 1. 객체에 v-for 사용 (value, key, index) value: 객체의 value값 (e.g. '와스레나이', '다나카') key: 객체의 key값 (e.g. 'title', 'singer') index: obj의 순서값을 index로 제공 2. 숫자 범위에 v-for 사용 1부터 n까지 템플릿을 여