[Vue] 2장 기본 컴포넌트

1.Vue.js의 컴포넌트 구조

Vue.js 애플리케이션에서 컴포넌트를 모듈화해 관리하는 것이 중요합니다. 각 컴포넌트는 별도의 파일로 만들어, 이를 통해 재사용성과 유지보수성을 높일 수 있습니다. src/components 폴더를 만들어 그 안에 컴포넌트를 저장합니다.

src/
└── components/
    ├── ChildComponent.vue
    └── ParentComponent.vue

ChildComponent.vue

이 컴포넌트에는 부모로부터 전달받는 메시지를 표시합니다.

• 템플릿: HTML 구조를 정의합니다. {{ message }} 를 사용해 부모에서 전달받은 메시지를 표시
• 스크립트: props를 사용해 부모 컴포넌트에서 전달된 데이터를 받아옴
• 스타일: 컴포넌트에만 적용되는 CSS 스타일을 정의

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
}
</script>

<style scoped>
div {
  color: red;
}
</style>

ParentComponent.vue

이 컴포넌트에는 자식 컴포넌트를 포함하고, 메시지를 전달하는 역할을 합니다.

• 템플릿: child-component를 사용해 자식 컴포넌트를 삽입하고 :message를 통해 데이터를 전달
• 스크립트: 자식 컴포넌트를 임포트, data 속성으로 메시지를 정의
• 스타일: 부모 컴포넌트에 대한 CSS 스타일을 정의

<template>
  <div>
    <h1>부모 컴포넌트</h1>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello, 자식 컴포넌트!',
    }
  },
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

<template>
  <div>
    <ChildComponent :message="parentMessage" />
    <ParantComponent />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'
import ParantComponent from './components/ParantComponent.vue'

export default {
  name: 'App',
  components: {
    ChildComponent,
    ParantComponent,
  },
  data() {
    return {
      parentMessage: 'Hello, World ',
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

---

 

GitHub - Koras02/vue-tutorial: https://thinky.tistory.com/category/Front-End/VueJS