[데브코스/TIL] DAY88 - Vue(4)

✅ 컴포넌트 등록

1. 전역 컴포넌트 등록

• main.js에서 컴포넌트 등록
• import문 없이 언제든지 어디서든 자유롭게 사용 가능
• 컴포넌트 이름 마음대로 지정 가능
• 장점 : 별도의 컴포넌트 등록 과정없이 쉽게 사용 가능
• 단점 : 컴포넌트가 필요없어도 불러옴

import { createApp } from 'vue';
import App from './App.vue';
import First from '@/components/First.vue';
import Second from '@/components/Second.vue';

const app = createApp(App);

// 컴포넌트 등록 1 - 하나씩 등록
app.component('First', First);
app.component('Second', Second);

// 컴포넌트 등록 2 - 체이닝 등록
app.component('First', First).component('Second', Second);

app.mount('#app');

2. 지역 컴포넌트 등록

• script 태그 내에서 컴포넌트 import
• components에 불러온 컴포넌트 등록

<script>
  import First from './components/First.vue';
  import Second from './components/Second.vue';

  export default {
    name: 'App',
    components: {
      First,
      Second,
    },
    data() {
      return {};
    },
  };
</script>

✅ 그 외 컴포넌트 관련

1. 컴포넌트 스타일 범위 - scoped 속성

• scoped 속성을 설정하면 해당 컴포넌트 내부에서만 스타일 적용
• 뷰의 특징) 루트 요소 공유
  • 설정한 스타일 요소가 자식 컴포넌트의 루트 요소로 있을 경우 scoped여도 반영됨
  • 반영되기를 원하지 않는다면 다른 태그로 한 번 래핑해야 함

2. 컴포넌트 props 전달

• 자식 컴포넌트의 속성값으로 전달
• 자식 컴포넌트는 props로 전달받은 속성을 배열로 등록
• props로 받지 않는 속성들은 자식의 루트 요소에 속성값으로 적용
  • 루트가 여러개라면 받지 못함

✅ 감시자 속성

1. watch 디렉티브

• 감시자 속성으로, 특정 데이터의 변화를 감지하여 특정 로직 수행
• watch 내부에 감시하고자 하는 데이터와 동일한 이름으로 메서드 정의
  • 감시하고 있는 데이터가 변경될 때마다 실행
  • 인자로 ‘현재값’과 ‘이전값’을 순서대로 받음

watch: {
  count(cur, prev) {
    console.log(cur, prev)
  }
}

2. watch 디렉티브 - 깊은 사용법

• 참조 자료형인 객체와 배열은 데이터가 변경되어도 watch로 감지 불가
  • deep을 true로 설정하여 감지되도록 설정
• 단, 인자로 받던 ‘현재값’과 ‘이전값’은 모두 ‘현재값’으로만 받음

watch: {
  array: {
    handler(cur, prev) {
      console.log(cur, prev)
    },
    deep: true,
  }
}

✅ Vue의 생명주기(lifecycle)

1. 단계

• setup
• beforeCreate : 옵션스 API 초기화 직전
• created : 옵션스 API 초기화 직후 및 템플릿 컴파일 직전
  • 보통 여기서 API 호출을 많이함 (beforMount보다 조금 더 빠르기 때문)
• beforeMount : 마운트 직전
• mounted : 마운트
• beforeUpdate : 데이터 변경 직전 (그러나 출력할 땐 이미 변경된 값으로 나옴)
• updated : 데이터 변경
• beforeUnmount : 마운트 해제 직전
• unmounted : 마운트 해제

📌 출처

수코딩(https://www.sucoding.kr)