[Vue.js] Components

컴포넌트란?

컴포넌트 : 하나의 독립된 개체로 HTML/CSS와 같은 단순 탬플릿 역활 뿐 만 아니라 기능 호출 및 데이터 바인딩 기능까지 지원한다.
사용 이유
독립된 개체이므로 어디에서든 동일하게 동작하여 재사용성이 좋다.
모듈화로 유지보수가 편하다.

다음 이미지를 보고 각각의 컴포넌트를 만들어보겠습니다.

주의점 : vue 파일의 template 속성 안에 꼭 하나의 div가 포함되어야 한다.

가능

<template>
  <div>
    <div>
      
    </div>
  </div>
</template>

불가능

```

views 폴더 & App.vue

시작하기 앞서, 해당 vue들의 기능에 대해 살펴보겠습니다.

App.vue

<template>
  <div id="app">
    <div id="nav">
      // Home 라우터를 클릭하게 되면, Home.vue에 작성된 내용들이 나타나게 됩니다.
      <router-link to="/">Home</router-link> |
      // About 라우터를 클릭하게 되면, About.vue에 작성된 내용들이 나타나게 됩니다.
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

App.vue는 모든 페이지의 기본값으로 어는 페이지에서든 작성된 해당 내용이 보입니다.
이를 통해, 로고, 로그인, 마이페이지 등이 포함된 네비게이션 바에 자주 사용됩니다.

Components 폴더

다음과 같이 components에 home 파일을 생성 후 파일 4개를 만들어줍니다.

파일을 생성 후 기본 탬플릿은 vue + enter입니다.

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

HomeAside.vue

<template>
    <div>
        <h1>HOME ASIDE</h1>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

HomeFeed.vue

<template>
  <div>
      <h1>HOME FEED</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

HomeHeader.vue

<template>
  <div>
      <input type="text" name="" id="">
      <button>버튼</button>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

HomeStory.vue

<template>
  <div>
      <h1>HOME STORY</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Home.vue에서는 위에서 작성한 components 파일들을 사용하기 위해 import를 통한 정의 후 사용할 수 있습니다.
Home.vue

<template>
  <div class="home">
    <HomeHeader/>
    <HomeStory/>
    <HomeFeed/>
    <HomeAside/>
  </div>
</template>

<script>
import HomeHeader from "../components/home/HomeHeader.vue"
import HomeFeed from "../components/home/HomeFeed.vue"
import HomeStory from "../components/home/HomeStory.vue"
import HomeAside from "../components/home/HomeAside.vue"



export default {
  name: "Home",
  // 컴포넌트를 사용하기 위해서는 컴포넌트 등록이 필요하다.
  components : {
    HomeHeader,
    HomeFeed,
    HomeStory,
    HomeAside
  }
}
</script>

<style scoped>

</style>

HomeHeader.vue를 더 세분화

기존 HomeHeader.vue

`HomeHeader.vue`
```html
<template>
  <div>
      <input type="text" name="" id="">
      <button>버튼</button>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

기존 HomeHeader.vue는 input과 button 속성을 사용하기 위해 div에 추가해주었습니다. 이 또한 컴포넌트를 통해 작성해줄 수 있습니다.
다음과 동일하게 home 폴더 안에 etc 폴더 생성 후 Button.vue 와 Search.vue 파일을 만들어줍니다.

Search.vue

<template>
<div>
    <input type="text"> 검색
</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Button.vue

<template>
  <div>
      <button>버튼</button>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

components를 해주었다면, HomeHeader.vue에서 import 후 사용을 해야합니다.
변경된 HomeHeader.vue

<template>
  <div>
      <Search></Search>
      <Button></Button>
  </div>
</template>

<script>
import Button from "../home/etc/Button.vue"
import Search from "../home/etc/Search.vue"
export default {
    components:{
        Button,
        Search
    }
}
</script>

<style>

</style>