[TIL] 내일배움캠프 3일차

국비 지원 교육이라서 공휴일은 전부 쉬는 날이라고 한다. 게더타운에 들어갔는데 가끔씩 4~5명 정도 보이는 것 말고는 아무도 없었다 ㅎㅎ.. 다음주엔 더 많으면 좋겠다.

오늘 한 것

Vuetify의 data-table 컴포넌트를 사용해서 알람 리스트를 만들고 수정, 삭제 기능을 개발했다. 예제를 보니 Vue의 computed, watch, slot을 활용해서 만든 컴포넌트였다. 해당 문법들에 대해 간단히 정리해보자.

• computed: 다른 데이터(상태)를 기반으로 한 데이터를 만들 때 사용한다. 참조하는 데이터가 변경되지 않으면 다시 계산하지 않는다. 캐싱해두기 때문에 쓸모없는 연산을 안해서 최적화에 좋음.
•  <script setup>
   import { ref, computed } from 'vue';
   ​
   const count = ref(0);
   const doubleCount = computed(() => count.value * 2);
   </script>
• watch: 데이터가 변경되는 경우 실행되는 함수를 등록한다.
•  <script setup>
   import { ref, watch } from 'vue';
   ​
   const count = ref(0);
   ​
   watch(count, (newVal, oldVal) => {
     console.log(`Count changed from ${oldVal} to ${newVal}`);
   });
   </script>
• slot: 부모 컴포넌트에서 자식 컴포넌트의 템플릿에 HTML이나 컴포넌트를 넣을 수 있게 해준다. v:slot-슬롯이름 처럼 설정하지 않으면 자식 컴포넌트 내부에 넣은 요소는 전부 default slot인 <slot></slot>에 입력된다.
•  <!-- ChildComponent.vue -->
   <template>
     <div>
       <slot></slot>
     </div>
   </template>
   <!-- ParentComponent.vue -->
   <template>
     <ChildComponent>
       <p>This is a slot content</p>
     </ChildComponent>
   </template>