02. 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 라는 확장자를 가지고 아래와 같은 기본적인 구성으로 이루어집니다.
<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>
vue 에서는 scoped 라는 옵션으로 component 의 style scope 를 적용할 수 있습니다.
<style scoped>
</style>
App.vue 의 style 을 아래와 같이 변경해주세요 .
코드의 의미는 App.vue 안에 있는 h1 태그에만 색상을 변경해라 입니다.
그런데 여기서 중요한건 “App.vue 안에 있는 h1 태그에만” 입니다.
<style scoped>
h1 {
color: #03a9f4;
}
</style>
변경된 스타일
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 가 됩니다.
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 사용
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 관리 또한 없어집니다 :)
Last modified 4yr ago