본문 바로가기

Front-End

 (25)
Vue.js) 컴포지션 API - props, context 1. props, contextprops: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. 자식 컴포넌트는 전달받은 props를 통해 부모 컴포넌트와 데이터를 공유합니다.context: 컴포넌트의 전체적인 문맥을 나타내며, 주로 attrs, slots, emit 등의 속성을 포함합니다.2. 컴포지션 API props, context 사용// App.vue Hello자식 컴포넌트 MyBtn에 parent 클래스, style 속성, log 메서드를 상속을 합니다.// MyBtn.vue setup 속성에 props와 context를 매개 변수로 하여 불러옵니다. 여기서 주의해야 할 점은 attrs, emit은 기존에 불러오던 방식, $ 기호를 붙여 사용하는 것과 달리 setup 내부에서 호출할 ..
Vue.js) 컴포지션API - 기본 옵션과 라이프 사이클 1.  data// App.vue {{ count }} {{ message }}// App.Composition.vue {{ count }} {{ message }}0Hello world!" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 data에 정의할 때 컴포지션 API에서는 ref를 import 하고 ref 매개변수에 초기값을 설정해 줍니다. 그리고 return 부분에 선언한 데이터를 return 해줍니다. 2. methods // App.vue {{ count }} {{ message }}// App.Composition.vue {{ count }} {{ message }}메서드 호출 전0Hello world!메서드 호출 후1Good!" data-ke-type="html..
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 첫 번째 경우와는 다르게 상속받는 자식 컴포넌..

티스토리툴바