지난 포스트에서 Vue CLI를 사용해서 프로젝트를 생성했었습니다. 이 프로젝트를 기반으로 Vue.js의 첫 컴포넌트를 작성해보겠습니다.

Vue CLI를 이용해서 프로젝트를 생성했다면 src 아래의 파일들이 다음과 같이 구성되어있을 것 입니다.
여기서 asserts, Helloworld.vue는 삭제해주세요.

Vue 파일 기본 구성

먼저 App.vue라는 파일을 확인해보겠습니다. Vue의 파일은 .vue 확장자를 사용합니다.

<template>
</template>

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

<style>
</style>

<template>

<template>는 HTML태그가 삽입되는 공간입니다. 이 태그 내부에서 뷰 컴포넌트의 구조를 HTML태그를 사용해서 구성합니다.

<template>태그 부분을 아래와 같이 변경하고 npm run serve를 통해 실행 시킨 후 http://localhost:8080/에 접속하면 아래와 같이 화면이 변경됨을 볼 수 있습니다.

<template>
  <h1>Hello, world!</h1>
</template>

<script>

<script>에는 스크립트 코드가 들어갑니다. 이때 유의할점은 해당 <script>가 위치하는 파일의 <template>에 대해서만 스코프가 적용이 됩니다.

이 부분에서 import를 사용해서 다른 모듈이나 라이브러리를 가져올 수 있습니다.

<style>

<style>에는 스타일 속성에 관련된 css 코드가 삽입됩니다.

css의 캐스케이딩을 따라서 <script>때와는 다르게 하위 컴포넌트에도 스타일이 적용될 수도 있는데요. 이때 옵션으로 scoped를 주게되면, 해당 <template>에만 스타일이 적용되게 할 수 있습니다.

<style scoped>
  /* scoped 옵션을 추가하면 해당 style 태그가 위치한 template에만 스타일이 적용됩니다. */
</style>

scoped옵션을 잘 이용하면 컴포넌트를 깔끔하게 분리할 수 있는 강력한 vue의 옵션이 됩니다.

---

컴포넌트 작성과 등록

컴포넌트 작성

그러면 화면에 나타나게할 컴포넌트를 작성해보겠습니다. components 디렉토리에 FirstComponents.vue라는 파일을 하나 만들었고 다음과 같이 내용을 작성했습니다.

<!--FirstComponents.vue-->
<template>
  <div id="content">First Component</div>
</template>

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

<style scoped>
#content {
  color: green;
}
</style>

컴포넌트 등록

이제 방금 작성한 컴포넌트를 화면에 띄워보겠습니다.

화면에 보여주기 위해서는 컴포넌트를 App.vue에 등록시켜야합니다.

즉, App.vue는 자식 컴포넌트들을 모으는 최상위 부모 컴포넌트의 역할을 하게됩니다.

컴포넌트 등록은 App.vue의 <script>태그에서 수행됩니다.

<!--App.vue-->
<script>
import FirstComponent from '@/components/FirstComponent.vue';

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

넣으려는 뷰 컴포넌트를 import로 가져옵니다. 그리고 export default의 components에 가져온 뷰 컴포넌트를 써넣으면 등록이 완료됩니다.

위의 import문에서 경로에 @마크가 있습니다. @는 절대경로를 의미하며 위치는 src를 가리킵니다. 즉, 위의 경로는 src/components/FirstComponent.vue를 가리키고 있습니다.

만약 상대경로로 나타낸다면 ./components/FirstComponent.vue가 됩니다.

이제 등록을 완료했으니 <template>에 등록한 컴포넌트를 삽입해서 나타나게 하면 됩니다.

<!--App.vue-->
<template>
  <h1>Hello, world!</h1>
  <div>
    <FirstComponent/>
  </div>
</template>

다시 로컬 호스트에서 확인해보면, 기존의 App과 새로 만들고 등록한 컴포넌트의 내용이 제대로 화면에 나타남을 볼 수 있습니다.

App.vue 전체 코드

<template>
  <h1>Hello, world!</h1>
  <div>
    <FirstComponent/>
  </div>
</template>

<script>
import FirstComponent from '@/components/FirstComponent.vue';

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

<style>
</style>

---

오늘은 뷰 컴포넌트를 처음으로 작성해보고 화면에 띄우기까지 완료했습니다.

개인적으로 리액트보다 확실히 입문하기 쉽다고 느껴졌습니다. 우리가 아는 html, js, css 코드를 직접 사용하면 되니까요. (리액트는 jsx, tsx)