[Vue] Component 사용하는 방법

 

안녕하세요. 혀코입니다.

이번 시간에는 Vue에서 Component를 사용하는 방법에 대해서 알아보겠습니다.

 

지난 시간에 Company 리스트를 반복문 v-for 를 사용해서 출력해봤습니다. 이 코드를 Component로 변경해서 사용하는 방법에 대해서 알아보겠습니다.

 

<template>
  <div>
    <h1>Company</h1>
    <ul>
      <li v-for="company in companies" :key="company">{{ company }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companies: ['Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss']
    }
  }
}
</script>

 

src/components 폴더에 Company.vue 파일을 만들어서 코드를 다음과 같이 작성합니다.

 

<template>
  <li>{{ name }}</li>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

 

<li> 태그 안에 name 데이터가 있고, props를 사용해서 name 데이터에 대한 타입을 String으로 지정해 줍니다. 이 데이터에는 항상 default 값이 들어가 있어야 하기 때문에 default를 빈 문자열로 지정해줍니다.

그리고, App.vue 파일을 다음과 같이 업데이트 합니다.

 

<template>
  <div>
    <h1>Company</h1>
    <ul>
      <Company v-for="company in companies" :key="company" :name="company">{{ company }}</Company>
    </ul>
  </div>
</template>

<script>
import Company from './components/Company.vue'
export default {
  components: {
    Company
  },  
  data() {
    return {
      companies: ['Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss']
    }
  }
}
</script>

 

<script> 태그에서 앞에서 생성한 Company.vue 파일을 불러와서 components에 등록시켜주고, 이것을 li 태그 대신 <Company> 태그로 사용할 수 있습니다. 이때, 데이터를 name props로 전달해 주기 위해서 :name을 추가해 줍니다.

 

 

 

이렇게 Vue에서 Component를 사용하는 방법에 대해서 알아봤습니다.

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)