> For the complete documentation index, see [llms.txt](https://simplevue.gitbook.io/intro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simplevue.gitbook.io/intro/02.-component.md).

# 02. Component 구성해보기

## 들어가며

component 의 정의는 Vue 에 대한 [설명](https://simplevue.gitbook.io/intro/~/edit/drafts/-LYl4IV67GQR0CHyNJiH/vue.js) 을 하며 알아봤었습니다. \
쉽게 생각하여 **component** 란 view 를 구성하는 작은 **조각**들입니다.

![](/files/-LYle-COEjM5kOmgMyoT)

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

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

![](/files/-LYle2OsWOK4LbFYQRKF)

### 실습

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

```javascript
$ vue create page-layout
```

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

![vue-cli 환경](/files/-LYlerjcttEAvTcqMgPU)

```bash
$ npm run serve
```

![](/files/-LYlewSeXpu6Xf8BKb8V)

#### 프로젝트 초기 환경 설정

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

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

![초기 프로젝트 설정](/files/-LYlfN8wyqjN4-D0RygA)

### .vue 파일 구성 알아보기

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

```javascript
<template> // html 
</template>

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

<style>    // style
</style>
```

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

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

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

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

![](/files/-LYlfqssg7eOvvLbdFqU)

### Style 변경과 scope&#x20;

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

```javascript
<style scoped>
</style>
```

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

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

![변경된 스타일](/files/-LYlg9I_jQ0oUqTJq3yG)

### Component 생성하기

Layout 을 구성하기 위해 Header.vue, Menu.vue, Content.vue 를 만들어보겠습니다. \
component 들은 components 폴더안에 생성합니다. component 파일의 이름은 **대문자**로 시작합니다.

```javascript
// Header.vue, Content.vue, Menu.vue 

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

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

<style scoped>
</style>
```

![component 생성](/files/-LYlgS7KQl4Y6KuDzbGU)

### Component 가져오기

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

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

```javascript
<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 는 아래와 같이 사용할 수 있습니다.

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

![component 사용](/files/-LYlhEoJUzoCqF7TqTAT)

### style 적용하기

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

```javascript
// App.vue 

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

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

![](/files/-LYlhPNrAb9WBT38Go41)

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

```javascript
// Header.vue 

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

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

![](/files/-LYlhXeIr8GgVF3-aZcO)

&#x20;Menu 와 Content.vue 에 적절히 flex 를 이용하여 레이아웃을 나누면 될 것 같습니다.

```javascript
// Menu.vue

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

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

```javascript
// Content.vue

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

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

![레이아웃 분리 후 ](/files/-LYlhkGnR3l7T732-5_Z)

### 마무리

component 별로 html, script, style 을 관리 할 수 있기 때문에 관림사 분리화, 모듈화가 쉬워졌습니다. \
component 를 잘 쪼갤수록 복잡한 tag, style 관리 또한 없어집니다 :)&#x20;