프론트엔드 (23) 썸네일형 리스트형 Vue.js) 컴포지션API - 반응형 데이터 1. 컴포지션 APIVue.js에서 컴포지션 API(Composition API)는 Vue3에서 도입되었으며, 복잡한 로직을 보다 모듈화 하고 재사용 가능하게 만드는 데 도움이 됩니다. 컴포지션 API는 주로 setup 함수를 통해 사용됩니다.setupsetup 함수는 Vue 컴포넌트의 초기 단계에서 호출되며, props와 context를 인자로 받을 수 있습니다. 내부에서 반응형 상태, 라이프 사이클 훅 등을 정의할 수 있습니다.반응형 상태ref: 단일 값의 반응형 상태를 생성합니다.reactive: 객체의 반응형 상태를 생성합니다.computedcomputed 함수를 사용하여 종속성에 따라 자동으로 업데이트 되는 계산된 속성을 정의합니다.watchwatch 함수를 사용하여 특정 데이터의 변화를 감지하.. Vue.js) 컴포넌트 - Refs 1. RefsVue.js에서 refs는 DOM 요소나 자식 컴포넌트를 직접 참조할 수 있는 방법을 제공합니다. 이는 주로 DOM 조작이나 자식 컴포넌트의 메서드 호출에 사용됩니다. 2. 사용 예제 Hello world! Hello world!라이프사이클이 created 일 땐 html 구조에 연결되기 전이기 때문에 undefined, null로 출력되지만 mounted 일땐 해당 엘리먼트가 출력됩니다. ref는 document.querySelector처럼 태그에 ref 속성으로 명시한 것을 $표시로 찾아 불러올 수 있습니다. 2-1. 자식 컴포넌트 엘리먼트 참조 // App.vue // HelloComponent.vue Hello~ Good~자식 컴포넌트를 호출할 때 refs 를 명시하고 refs 명.. Vue.js) 컴포넌트 - Provide, Inject 1. Provide, InjectProvide: 부모 컴포넌트에서 'provide' 옵션을 사용하여 자식 컴포넌트에 데이터를 제공합니다.Inject: 자식 컴포넌트에서 'inject' 옵션을 사용하여 부모 컴포넌트에서 제공한 데이터를 주입받습니다.2. 사용예시// App.vue // ParentComponent // ChildComponent prop: {{ prop }} provide: {{ provide }}prop: This is propsprovide: This is provide" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스위 코드와 같이 props로 데이터를 넘겨주게 되면 App -> Parent -> Child에 모두 거쳐 데이터를 전달하여하 하지만, pro.. Vue.js) 컴포넌트 - Slot 1. SlotVue.js의 slot은 부모 컴포넌트에서 자식 컴포넌트로 콘텐츠를 전달할 때 사용되는 강력한 기능ㅎ입니다. slot을 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 위치에 자신의 콘텐츠를 삽입할 수 있습니다. 2. slot 기본값 설정// App.vue // MyBtn.vue Apple AppleBanana" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스slot 기본 값은 위와 같이 slot 태그 안에 명시해 주면 됩니다. 자식 컴포넌트를 호출할 때 slot안에 들어갈 내용을 명시하면 해당 내용으로 적용됨을 알 수 있습니다. 3. slot 구분하여 명시// App.vue (B) Banana // MyBtn.vue (B)Banana" data-.. Vue.js) 컴포넌트 - Emit 1. EmitVue.js의 emit은 부모-자식 컴포넌트 간의 통신을 처리하는 중요한 메커니즘입니다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트가 해당 이벤트를 수신하여 처리할 수 있습니다. 이를 통해 부모 컴포넌트와 자식 컴포넌트 간의 데이터 흐름을 관리할 수 있습니다. 2. 부모 컴포넌트에서 메서드 상속// App.vue // MyBtn.vue parentemits 속성에 부모 컴포넌트에서 상속하는 함수명을 배열형식으로 정의해 주고 이벤트를 호출할 엘리먼트에서@['event']="$emit(["parent event"])" 라고 명시하면 됩니다. 2. 부모 컴포넌트에서 매개변수 있는 메서드 상속// App.vue // MyBtn.vue parameter위처럼 매개 변수가 존재하는 함수를 호.. Vue.js) 컴포넌트 - 속성 상속 1. 속성 상속Vue.js에서 컴포넌트는 부모-자식 관계로 구성될 수 있으며, 자식 컴포넌트는 부모 컴포넌트로부터 다양한 속성이나 메서드를 상속받을 수 있습니다. Vue.js는 컴포넌트 간의 속성 상속을 지원하지 않지만, 대신에 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 2. 상속받는 자식 컴포넌트의 루트가 하나일 때// App.vue Banana // MyBtn.vue 부모 컴포넌트 App에서 자식 컴포넌트 MyBtn에 parent 클래스를 상속이 이루어졌음을 확인할 수 있습니다. 3. 상속받는 자식 컴포넌트의 루트가 여러 개일 때// App.vue Banana // MyBtn.vue Hello Vue 첫 번째 경우와는 다르게 상속받는 자식 컴포넌.. Vue.js) 컴포넌트-기초 1. 컴포넌트Vue.js 컴포넌트는 Vue 애플리케이션의 재사용 가능한 코드 조각으로, 각각의 컴포넌트는 독립적인 뷰 및 로직을 가집니다. 컴포넌트는 더 큰 애플리케이션을 작은, 관리 가능한 부분으로 나누어 개발할 수 있게 해 줍니다. 2. components와 propsprops: 부모 컴포넌트로부터 데이터를 전달받기 위한 속성을 정의합니다.// App.vue Slot 미사용 Slot 사용 Banana Apple Cherry Melon Melon // MyBtn.vue {{ text }} // MyBtn2.vue Slot 미사용BananaAppleCherryMelonSlot 사용BananaAppleCherryMelonMelon" data-ke-type="html">HTML 삽입미리보.. Vue.js) v-model 수식어 1. v-model 수식어Vue.js에서 v-model 수식어는 폼 입력 요소와 데이터 모델 간의 바인딩을 커스터마이징 하는 데 사용됩니다. 이를 통해 다양한 입력 타입에 대한 특별한 동작을 지정할 수 있습니다. 주요 수식어는 lazy, number, trim 이 있습니다. 2. lazylazy 수식어를 사용하면 변경 이벤트 (change event)가 발생할 때만 데이터가 업데이트됩니다. 사용자가 입력을 마친 후에만 데이터가 업데이트되도록 합니다. {{ msg }} change 이벤트와 .lazy 수식어를 입력하면 input 필드에 변화가 있을 시 즉각적인 업데이트가 되지 않고 엔터나 탭을 누르면 업데이트됩니다. 3. numbernumber 수식어는 입력 값을 자동으로 숫자로 변환합니다. 사용자.. 이전 1 2 3 다음
