To do List 만들기_(1) 컴포넌트의 기본 프레임 잡기

<목차>

(1) 컴포넌트의 기본 프레임 잡기

(2) 컴포넌트의 통신 props,event

(3) 각각의 컴포넌트에 기능 구현

 

 

 

To do List를 만들기 전에 컴포넌트의 구성에 대해 알고 있어야 한다.

 

우리가 쓸 컴포넌트는 총 5개로 App.vue/TodoFooter.vue/TodoHeader.vue/TodoInput.vue/TodoList.vue 이다.

 

 

컴포넌트란, 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미,

사용이유, 재활용성과 수정에 용이 하기 때문이다. ( 하나의 컴포넌트에 모든 기능을 구현 하면 되지않을까 생각을 하겠지만, 프로젝트가 커진다면 어려움 그자체이다.

 

싱글 컴포넌트 체계

 

 

 

그렇다면 Todo List를 만들기 위해 컴포넌트를 어떻게 조합해야하는지 생각을 해보자.

 

app.vue 안에 나머지 4개의 컴포넌트가 포함이 되어있는 구조이다.

포함관계

자 이제 이걸 보면 드는 생각이 무엇일까?

 

Todo~.vue라는 컴포넌트에 각각의 기능을 구현해주고 그것을 app.vue에 넣어 주면 되겠구나!

 

정답이다. 저렇게 해주면 된다.  

 

그렇다면 어떻게 해주어야 컴포넌트가 연결이 될까 설명을 하겠다.

 

 

1.  컴포넌트 연결 방법

   

//  (App.vue 컴포넌트임)//

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


</template>

<script>
import TodoHead from './components/TodoHeader';
import TodoInputt from './components/TodoInput';
import TodoListt from './components/TodoList';
import TodoFoot from './components/TodoFooter';


export default {
    
    components: {
        'TodoHeader': TodoHead,
        'TodoInput': TodoInputt,
        'TodoList': TodoListt,
        'TodoFooter': TodoFoot
    }
}
</script>

 

코드 등록시 컴포넌트 구조

 

template안에 부분 : 우리가 보이고 싶어하는 컴포넌트의 순서대로 작성함

                           <자식 컴포넌트명></자식 컴포넌트명>             | 자식컴포넌트 : 내부에 들어가는 컴포넌트

                           

 

script 안에 부분:  1) import 컴포넌트내용 from 디렉토리(주소)

 

                       2) 컴포넌트 등록 

                     

이렇게 하면 끝이다.

 

주의 할점은  컴포넌트 등록시 우리가 정한 컴포넌트 내용으로 import  를 해와야 한다.  (위에 예시 확인)