02. Component 구성해보기

view 를 구성하는 작은 조각들에 대해서 알아봅니다.

들어가며

component 의 정의는 Vue 에 대한 설명 을 하며 알아봤었습니다. 쉽게 생각하여 component 란 view 를 구성하는 작은 조각들입니다.

위 페이지의 레이아웃을 크게 나눠보면 세가지의 component 로 분리할 수 있을 것 같습니다.

• 상단의 헤더 (Header.vue)

• 왼쪽의 메뉴리스트 (Menu.vue)

• 오른쪽의 본문 (Content.vue)

실습

직접 vue component 를 만들어 위의 레이아웃을 구성해보겠습니다.

$ vue create page-layout

프로젝트 환경 설정은 default 로 해주시면 됩니다.

vue-cli 환경

$ npm run serve

프로젝트 초기 환경 설정

우리가 실습할 환경을 만들기위해 vue-cli 가 기본적으로 만들어주는 component 들을 살짝 수정해야합니다. 일단 App.vue 의 내용을 아래와 같이 변경해주세요. 그리고 components 폴더 안에 있는 HelloWorld.vue 를 제거해주세요 :) 변경하시고 http://localhost:8080/ 를 확인해 보시면 모든 내용을 지웠기 때문에 빈 화면이 보이실거에요

앞으로의 모든 예제는 초기 프로젝트 환경에서 진행합니다 :)

초기 프로젝트 설정

.vue 파일 구성 알아보기

vue 파일들은 .vue 라는 확장자를 가지고 아래와 같은 기본적인 구성으로 이루어집니다.

<template> // html 
</template>

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

<style>    // style
</style>

각 vue 파일들은 자신만의 html, style, script 를 가지기 때문에, component 별로 독립된 환경을 가지고 개발할 수 있습니다.

App.vue 파일의 <template> 를 아래와 같이 수정해주세요

<template>
  <div>
    <h1>Hello Vue</h1>
  </div>
</template>

http://localhost:8080/ 에서 변경된 텍스트를 확인할 수 있습니다.

Style 변경과 scope

vue 에서는 scoped 라는 옵션으로 component 의 style scope 를 적용할 수 있습니다.

<style scoped>
</style>

App.vue 의 style 을 아래와 같이 변경해주세요 . 코드의 의미는 App.vue 안에 있는 h1 태그에만 색상을 변경해라 입니다. 그런데 여기서 중요한건 “App.vue 안에 있는 h1 태그에만” 입니다.

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

변경된 스타일

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 가져오기

조각으로 분리해 놓은 component 들을 모을 차례입니다. App.vue 에서 모든 조각을 조립합니다. 즉 App.vue 는 다른 component 들의 부모 component 가 됩니다.

App.vue 의 script 부분에 아래의 코드를 작성해주세요

<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>

보시면 ”@/components/Content" 와 같은 식으로 경로를 설정해 놓은 것을 볼 수 있습니다. @ 는 절대 경로 (src 아래) 를 가리킵니다. ./ 같은 상대 경로로 가져올 수 도 @ 같은 절대 경로로도 가져올 수 있습니다.

component 를 사용하기 위해서는 script 안쪽의 components 에 등록을 해줘야 vue component 로 인식할 수 있습니다. 등록한 Component 는 아래와 같이 사용할 수 있습니다.

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

component 사용

style 적용하기

component 들에게 style 을 적용하겠습니다. component 조각을 감싸고 있는 div 태그에 wrap 이라는 클래스를 주고 display: flex 스타일을 주겠습니다.

// App.vue 

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

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

Header.vue 의 style 을 수정해보겠습니다. div 에 스타일을 줬지만 scoped 를 옵션을 사용했기 때문에 Header.vue 안에 있는 div 에만 해당 스타일이 적용됩니다.

// Header.vue 

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

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

Menu 와 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 을 관리 할 수 있기 때문에 관림사 분리화, 모듈화가 쉬워졌습니다. component 를 잘 쪼갤수록 복잡한 tag, style 관리 또한 없어집니다 :)