[Vue.js] 컴포넌트란?, 뷰와 컴포넌트

컴포넌트(Component)

• 재사용 혹은 조립 가능한 독립적인 UI 객체
• HTML 조각(<template>) + JavaScrip(<script>) + CSS(<style>)의 결합체

실제 코드 예시

<!-- 컴포넌트 UI 정의 -->
<template>

</template>

<script>
export default {
  //컴포넌트의 대표이름(devtools에 나오는 이름)
  name:"",
  //추가하고 싶은 컴포넌트 등록
  components: {
    
  },
  //컴포넌트에서 사용하는 데이터 정의
  data() { // () => {
    return {
      
    };
  },
  //컴포넌트에서 사용하는 메소드 정의
  methods: {
    
  }
}
</script>

<!-- 컴포넌트 스타일 정의 -->
<style scoped> /* scoped는 현재 template에만 적용한다는 의미 */
  
</style>

 

뷰(View)와 컴포넌트(Component)

공통점

• .vue(싱글 파일 컴포넌트) 파일 확장명 사용
• 둘다 컴포넌트이므로 파일 작성 방법 동일

뷰(View)

• 하나의 화면(페이지)
• 재사용이 어려운 컴포넌트
• views 폴더에 작성

컴포넌트(Component)

• 여러 화면(페이지) 안에 배치될 수 있는 재사용 가능한 컴포넌트
• components 폴더에 작성

---

Vue SPA 구조

 

[Vue.js] Component: 싱글 파일 컴포넌트