할 일 관리 앱 만들기

컴포넌트 생성

일반적으로, 프로젝트 폴더에서 src/밑에 /components폴더를 생성하고, 그 아래에 컴포넌트를 모아서 관리한다.

하지만 애플리케이션의 규모가 커서 기능별로 관리해야 할 경우에는 src/components/기능/컴포넌트.vue와 같은 형식으로 관리한다고 한다. 예를 들어, 로그인 관련된 컴포넌트는 src/components/login/LoginForm.vue 와 같은 방식으로 관리하면 컴포넌트를 기능별로 더 쉽게 관리할 수 있다.

살펴보니 현재 내가 진행하고 있는 프로젝트도 기능별로 분류가 되어있다.

컴포넌트 등록

앞에서 생성한 4개의 컴포넌트는 모두 최상위 컴포넌트인 App.vue(src/App.vue)에 등록한다.

물론 components에 등록하면 되겠지만, 싱글 파일 컴포넌트 체계에서는 특정 컴포넌트에서 다른 위치에 있는 컴포넌트의 내용을 불러오려면 import 해야한다.

<script>
import TodoFooter from "./components/TodoFooter"; 
import TodoHeader from "./components/TodoHeader";
import TodoInput from "./components/TodoInput";
import TodoList from "./components/TodoList";
export default {
  components : {
    'TodoHeader' : TodoHeader,
    'TodoFooter' : TodoFooter,
    'TodoInput' : TodoInput,
    'TodoList' : TodoList
  }
}
</script>

위와 같이 등록했다면 <template>영역에 그려보자

<template>
 <div id="app">
   <TodoHeader></TodoHeader>
   <TodoInput></TodoInput>
   <TodoList></TodoList>
   <TodoFooter></TodoFooter>
 </div>
</template>