[016] Vue.js 컴포넌트 심화 슬롯

 
2024.05.29(수)
 
Vue.js 5일차

컴포넌트는 정확히 소프트웨어 개발을
마치 레고 쌓듯이 쉽게 할 수 있는 기술을 말한다.

재사용이 가능한 각각의 독립된 모듈이라고도 하며,
컴포넌트 내 정보는 외부로부터 은닉된다.
(인터페이스만 제공)

---

 
원쌤의 Vue.js 퀵스타트
 

• CH01 Vue.js 소개
• CH02 Vue.js를 위한 ES6
• CH03 Vue.js 기초와 Template
• CH04 Vue 인스턴스
• CH05 이벤트 처리
• CH06 스타일 적용
• CH07 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발
• CH08 컴포넌트 심화
• CH09 Composition API
• CH10 vue-router를 이용한 라우팅
• CH11 axios를 이용한 HTTP 통신
• CH12 vue-router와 axios를 사용한 예제
• CH13 pinia를 이용한 상태 관리

 

---

 

CH08 컴포넌트 심화

 
8.1 단일 파일 컴포넌트에서의 스타일
 
<style scoped>
: 해당 컴포넌트에만 스타일 적용
: Vue에 특화되어있다는 것이 장단점
 
CSS Modules: <style module>
: 컴포넌트 수준에서 스타일 적용
: 다양한 프레임워크 지원, 모듈화된 스타일로 재사용서오가 유지보수성 ↑
 
8.2 슬롯
부모 컴포넌트에서 템플릿 정보를 전달하는 방법
(끼워넣어주는...)
 
부모 컴포넌트와 자식 컴포넌트 사이의 정보 교환 방법
: props와 이벤트 → 주로 데이터 교환
ex) <child></child> ... 내용이 없음
 
○ CheckBox1 NoSlotTest:
어제 내용 복습, slot 사용하지 않은 예시
 
범위 슬롯(Scoped slot)
: 부모 컴포넌트에서 템플릿에 테이터를 바인딩할 때
 
8.3 동적 컴포넌트
 
실습 자료

[016] Vue.js 컴포넌트 심화 슬롯

 
 
8.4 컴포넌트에서의 v-model 디렉티브
 
★이벤트명은 반드시 'update:속성명"
 
8.5 provide, inject를 이용한 공용데이터 사용
아주 많이 떨어져있는 부모-자식 간 정보를 공유하고 싶을 때
 
- 공용 데이터를 부모 컴포넌트(App)에서 제공(provide)
- 어느 컴포넌트(자식)에서나 필요한 데이터를 주입(inject)
 
최상위 루트에서 객체로 전달
 
8.6 텔레포트
메인 화면과 독립적이면서 공유 UI를 제공하는 경우
 
- 계층 구조와 관계없이 렌더링
- 99% v-if와 함께 사용
 
*modal:
대화상자 운영방식 2가지 중, 후면처리가 되지 않는 버전
새로운 웹 X → card의 z축을 100으로 설정 등
(반대말로는 modalless)
 
*static: 디폴트 / ralative: static을 원점으로 / absolute: 절대 좌표 / fixed: 고정 좌표
 
사용 사용하는 문단:
methods : {
   changeModal() {
     this.isModal = true ;
     setTimeout( ()=>{ this.isModal = false }, 2000);
   }
},
 
[예시: no-slot-test]
 
▼[components] > CheckBox1.vue
 

<template>

  <div>

    <!-- 체크박스 변경시 id값과 현재 체크박스의 체크상태값을 check-changed 이벤트에 담아서 부모로 보냄 -->

    <input

      type="checkbox"

      :value="id"

      :checked="checked"

      @change="$emit('check-changed', { id, checked: $event.target.checked })"

    />

    <!-- 체크박스가 체크됐을 경우 span 태그 렌더링 -->

    <span

      v-if="checked === true"

      style="color: blue; text-decoration: underline"

      ><i>{{ label }}</i></span

    >

    <!-- 보여질 경우 이탤릭체로 label 출력 -->

    <!-- 체크 해제됐을 경우 렌더링되는 span -->

    <span v-else style="color: gray">{{ label }}</span>

  </div>

</template>

<script>

// 부모 컴포넌트로부터 받을 속성들 / props, emit가 있으면 자식

export default {

  name: 'CheckBox1',

  props: ['id', 'checked', 'label'],

};

</script>

 
▼[components] > NoSlotTest.vue
 

<template>

  <div>

    <h3>당신이 경험한 프론트엔드 기술은? (첫번째: Slot 사용(x))</h3>

    <!-- item 배열을 순회하면서 자식의 props에 해당 값들을 넘겨준다 -->

    <!-- 자식에서 보낸 check-changed 이벤트에 CheckBoxChanged 함수 연결 -->

    <checkBox1

      v-for="item in items"

      :key="item.id"

      :id="item.id"

      :label="item.label"

      :checked="item.checked"

      @check-changed="CheckBoxChanged"

    ></checkBox1>

  </div>

</template>

<script>

import CheckBox1 from './CheckBox1.vue';

export default {

  name: 'NoSlotTest',

  components: { CheckBox1 },

  data() {

    return {

      items: [

        { id: 'V', checked: true, label: 'Vue' },

        { id: 'A', checked: false, label: 'Angular' },

        { id: 'R', checked: false, label: 'React' },

        { id: 'S', checked: false, label: 'Svelte' },

      ],

    };

  },

  // 변경된 체크박스의 id로 현재 items 배열에서 해당 요소를 찾는다.

  methods: {

    CheckBoxChanged(e) {

      let item = this.items.find((item) => item.id === e.id);

      // 해당 아이템의 checked 값을 받아온 값으로 변경

      item.checked = e.checked;

    },

  },

};

</script>

 
▼ App.vue

<template>

  <div>

    <NoSlotTest />

  </div>

</template>

<script>

import NoSlotTest from './components/NoSlotTest.vue';

export default {

  name: 'App',

  components: { NoSlotTest },

};

</script>

 
▼ 슬롯 없는 최종 버전

[016] Vue.js 컴포넌트 심화 슬롯

 
헷갈리는 거

[016] Vue.js 컴포넌트 심화 슬롯