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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simplevue.gitbook.io/intro/02.-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.