Component 구성해보기

Component란?

component란 view를 구성하는 작은 조각들이다.
예를 들어 특정 페이지의 레이아웃을 크게 나눠보면

상단의 헤더(Header.vue)
왼쪽의 메뉴(Menu.vue)
오른쪽의 본문(Content.vue)

 

으로 나눌 수 있을 것이다.

 

 

먼저 프로젝트를 만들고 초기 환경 설정을 해주자.

 

vue create layout

 

실습 환경을 만들기 위해 vue-cli가 기본적으로 만들어주는 component들을 조금 수정해야 한다.

 

App.vue)

template와 script 안의 내용 및 style을 지워서 초기화 시켜 준다.

 

template 태그는 html의 내용작성
script는 자바스크립트,
style는 css를 작성하는 태그이다.

 

 

그리고 프로젝트 내의 components 폴더 안에 있는 HelloWorld.vue라는 파일도 삭제해준다.

components 폴더는 component들을 넣어두는 폴더이다.

 

 

.vue 파일 구성 알아보기

vue 파일들은 .vue라는 확장자를 가지고 있으며 다음과 같은 구성으로 이루어져 있다.

<template> // html 
</template>

<script>   // script
export default {};
</script>

<style>    // style
</style>

보다시피 각 vue 파일들이 자신들의 html, script, style 를 가지기 때문에 component 별로 독립된 세팅이 가능하다.

 

 

Style 변경과 scope

scoped라는 옵션으로 component의 style scope를 적용할 수 있다.

 

 

App.vue 안에 style 태그를 다음과 같이 변경하고 내용을 작성하였다.

<style scoped>
h1 {
  color: #03a9f4;
}
</style>

 

이 코드의 의미는 App.vue 안에 있는 h1 태그에만 해당 스타일을 적용한다는 것이다.

 

 

Component 생성하기

Layout 을 구성하기 위해 Header.vue, Menu.vue, Content.vue 를 만드려고 한다.

component 들은 components 폴더안에 생성한다. component 파일의 이름은 대문자로 시작한다.

// Header.vue, Content.vue, Menu.vue 

<template>
    <div> 컴포넌트 이름 </div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>

 

Component 가져오기

위에서 만든 component를 모아보자.

App.vue에서 모든 조각을 모아 조립한다.

즉, App.vue는 다른 component들의 부모 component가 되는 것이다.

 

component를 script 태그 안의 components에 등록한다.

<script>
import Header from "./components/Header";
import Menu from "./components/Menu";
import Content from "@/components/Content";

export default {
  name: "app",
  components: { // 가져온 component 들을 등록합니다.
    Header,
    Menu,
    Content
  }
};
</script>

@ 는 절대 경로 (src 아래) 를 가리킨다.

./ 같은 상대 경로로 가져올 수 도 @ 같은 절대 경로로도 가져올 수 있다.

 

등록을 한 후, template에서 태그를 입력하여 사용한다.

<template>
  <div>
    <Header/>
    <div>
      <Menu/>
      <Content/>
    </div>
  </div>
</template>

 

style 적용하기

Menu와 Content component를 감싸고 있는 div 태그에 style을 적용해본다.

// App.vue 

<Header/>
<div class="wrap">
    <Menu/>
    <Content/>
</div>

<style scoped>
.wrap {
  display: flex;
}
</style>

wrap이라는 클래스를 부여하고 flex 스타일을 적용했다.

 

 

이번엔 Header.vue의 style을 적용해본다.

// Header.vue 

<template>
  <div>Header Component</div>
</template>

<style scoped>
div {
  position: sticky;
  height: 50px;
  border-bottom: 1px solid #ebebeb;
}
</style>

scoped 옵션을 사용했기 때문에 Header.vue 안에 있는 div 태그에만 해당 스타일이 적용 된다.

 

 

Menu.vue와 Content.vue에도 flex를 이용해 레이아웃을 나누었다.

// Menu.vue

<template>
  <div>Menu Component</div>
</template>

<style scoped>
div {
  flex: 1;
}
</style>

// Content.vue

<template>
  <div>Content Component</div>
</template>

<style scoped>
div {
  flex: 2;
}
</style>

 

 

결과는 다음과 같다.

 

결론

component 별로 html, script, style을 관리할 수 있기 때문에 관심사의 분리와 모듈화가 쉬워진다.