Vue.js(2)_Component

해당 게시글은 2022.07.22에 깃허브로 작성되었으며

여러 강의 블로그를 따라하며 정리한 내용입니다.

 

---

 

1. 프로젝트 생성

Vue에서 중요한 Component에 대해 더 확실히 이해할 수 있도록 레이아웃을 다루는 Vue 프로젝트를 생성해보자.

vue create page_layout

 

위 명령어로 Vue 프로젝트를 생성하고 /src/App.vue를 다음과 같이 수정하자.

<template>
  <div>
    안녕하세요
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style>

</style>

 

---

 

2. .vue의 기본 구조

위 파일의 구조를 통해 .vue 의 기본 구조를 알 수 있다.

// html
<template>
</template> 

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

// style
<style>
</style> 

 

Vue의 style에서는 scoped라는 옵션으로 Component의 style 범위(scope)를 지정할 수 있다.

App.vue의 style을 다음과 같이 수정해보자.

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

위와 같이 수정하면 App.vue 내에만 존재하는 div 태그에만 색상을 변경한다 는 의미가 된다.

 

---

 

3. Component 생성

layout을 구성하기 위해 Components 폴더 안에 Header, Menu, Content.vue 파일을 생성해보자.

<template>
  <div>
    Component 이름
  </div>
</template>

<script>
export default {
  name: 'Component 이름_',
}
</script>

<style scoped>

</style>

(1) Component 파일들의 이름은 대문자로 시작해야 한다.
(2) vue 파일 생성 후 기본 구조는 < + 엔터를 통해 빠르게 생성 가능하다.
(3) script 내에 해당 component의 이름을 입력해야 하는데 이 때 multi-word로 작성하지 않으면 오류가 생긴다.
그렇기에 주로 필자는 Component 이름_ 형태를 사용하는 편이다.

 

---

 

4. Component 불러오기

이어서 Component들을 App.vue로 불러와서 보이게 할텐데 App.vue의 script에 아래와 같은 코드를 작성해준다.

// App.vue
import Header from './components/Header.vue';
import Menu from './components/Menu.vue';
import Content from '@/components/Content.vue';

export default {
  name: 'App',
  components: {
    Header,
    Menu,
    Content,
  }
}
</script>

<style scoped>
</style>

Content의 경우를 보면 '@/components/Content.vue' 와 같은 방식으로 경로를 설정해두었는데
@는 절대 경로(src 아래)를 가리킨다.

 

여기서 주의해야 할 점은 Component를 사용하는 방법이다.

3가지의 절차를 거쳐야 하는데 다음과 같다.

1. import를 통해 해당 Component 파일을 불러온다.
2. components에 Component를 등록한다.
3. template 내부에서 사용한다.

이 3가지의 절차 중 하나라도 이행하지 않는다면 오류가 생긴다.

 

Component는 아래와 같이 태그를 통해 사용하면 된다.

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

 

---

 

5. Style 적용

Component를 감싸고 있는 div 태그에 wrap이라는 class를 주고 style을 설정해보자.

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

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

 

이어서 Header.vue의 style을 수정해보자.

.wrap {position: sticky; height: 50px; border-bottom: 1px solid #ebebeb;}

 

수정 후 화면을 보면 아래와 같은 구조일 것이다.

 

이어서 Menu, Content의 div에 flex를 각각 1, 2로 설정함으로써 레이아웃을 나누자.

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

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

 

그럼 아래와 같이 레이아웃이 완성된다.

이와 같이 재사용될 구조는 외부에서 Component로 생성한 뒤, 이를 불러옴으로써 사용 가능하다.

 

---

 

다음 시간에는 data를 다룰 때 필수적인 state와 props에 대해 알아보자.