코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 6일차

5장 컴포넌트 다루기

5.1 컴포넌트란

웹 애플리케이션의 복잡도 증가로 페이지 단위 개발 방식은 매우 비효율적이어서 컴포넌트 기반 아키텍처를 사용

컴포넌트는 특정 기능이나 작업을 독립적으로 수행하기 위한, 논리적으로 구분된 코드 단위

컴포넌트의 장점

• 재사용성: 같은 기능이나 작업이 필요한 곳에서 재사용 가능
• 독립성: 다른 컴포넌트에 영향을 주지 않고 특정 컴포넌트만 수정하거나 교체할 수 있음
• 모듈성: 웹 애플리케이션을 개별 단위로 구분하기때문에 복잡성이 줄어듬.
• 확장성: 컴포넌트에서 구성 요소를 추가하거나 수정해 새로운 동작이나 기능을 제공
• 캡슐화: 내부의 복잡성을 숨기고, 단순하게 기능만 사용할 수 있는 인터페이스 제공

5.2 컴포넌트 정의하기

싱글 파일 컴포넌트(컴포넌트): 확장자 vue로 끝나는 파일 <script> <template> <style>로 작성

5.3 컴포넌트 생명주기 이해하기

출처: https://ko.vuejs.org/guide/essentials/lifecycle

5.4 컴포넌트 속성과 이벤트 정의하기

사용자 정의 속성: 전역 등록하거나 지역 등록한 컴포넌트를 사용할 때 컴포넌트와 함께 정의한 속성, 해당 컴포넌트로 원하는 값을 전달할 때 사용

 

사용자 정의 이벤트

<template>

  <컴포넌트 @이벤트_타입="이벤트_핸들러" />

</template>

이벤트 발신(인라인 핸들러, 메서드 핸들러 방식)

App.vue

<script>
import FirstChild from './components/FirstChild.vue';
import UserProfile from './components/UserProfile.vue';

export default {
  components: {
    FirstChild,
    UserProfile,
  },
  methods: {
    printHello(name, age) {
      alert(`안녕하세요 이름: ${name}, 나이: ${age}`);
    },
  },
}
</script>

<template>
  <FirstChild />
  <UserProfile @print-hello="printHello" />
</template>

<style>
p {
  color: orange;
}
</style>

UserProfile.vue

<script>
export default {
    methods: {
        parentEventCall() {
            this.$emit('print-hello', '철수', 30);
        },
    },
}
</script>
<template>
    <button @click="parentEventCall">클릭</button>
</template>