Vue.js To Do List 만들기 #2 컴포넌트 구현(1)

Vue.js To Do List 만들기 #2 컴포넌트 구현(1)

---

컴포넌트 생성 및 등록(1)

프로젝트 초기 구성을 완료하였으니 애플리케이션에 필요한 컴포넌트들을 생성하고 등록한다. To Do List에 필요한 컴포넌트는 TodoHeader, TodoInput, TodoList, TodoFooter 4개이다. /src/경로 아래에 components 폴더를 생성 후  TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue 파일을 생성한다.

 

/src/components/ 폴더 아래 필요한 컴포넌트 생성

각각의 파일을 열어 아래와 같이 컴포넌트의 기본 구조를 잡는다.

<!-- TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue -->

<template>
    <div>각 컴포넌트 명</div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

생성한 컴포넌트를 등록하여 화면에 나타내기 위하여 최상위 컴포넌트인 App.vue에 등록한다. /src/App.vue에 기본적으로 들어있는 초기 코드를 모두 지우고 아래와 같이 작성한다.

<!-- /src/App.vue -->

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

<script>
import TodoHeader from './components/TodoHeader';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';
import TodoFooter from './components/TodoFooter';

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

<style>

</style>

저장하면 브라우저가 자동으로 새로고침이 되고, 아래와 같이 최상위 컴포넌트 아래 4개의 하위 컴포넌트들이 잘 생성,등록 된 것을 알 수 있다.

 

vue 개발자 도구를 통해 확인한 컴포넌트 구조

컴포넌트 구현 > TodoHeader

먼저 TodoHeader 컴포넌트에 타이틀을 지정하기 위하여 template의 내용을 수정한다.

<!-- /src/components/TodoHeader.vue -->

<template>
    <header>
        <h1>TO DO LIST!</h1>
    </header>
</template>

컴포넌트 구현 > TodoInput

그리고 할일을 입력하는 TodoInput 컴포넌트에는 input태그와 button태그를 추가한다. 또한 input box에 텍스트를 입력했을 때 뷰 인스턴스에서 값을 인식할 수 있도록 v-model디렉티브와 데이터속성 newTodoItem을 추가한다.

<!-- /src/components/TodoInput.vue -->

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button>추가</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            newTodoItem: ''
        }
    }
}
</script>

inputbox에 텍스트를 입력하면 newTodoItem의 값도 갱신된다.

이제 inputbox에 입력된 내용을 갖게 되었고, 다음은 추가 버튼을 누르면 텍스트를 저장하기 위한 버튼 이벤트를 추가한다. (예제 구현은 local storage에 값을 저장하는 것으로 한다.) 추가 버튼을 클릭했을때 어떤 동작을 수행할 수 있게 v-on:click에 이벤트 addTodo를 지정한다. 그리고 이 이벤트 addTodo로직은 methods에 정의한다.

<!-- /src/components/TodoInput.vue -->

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button v-on:click="addTodo">추가</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            newTodoItem: ''
        }
    },
    methods: {
        addTodo(){
            console.log(this.newTodoItem);
        }
    }
}
</script>

우선 버튼 이벤트 작동여부 확인을 위해 추가 버튼 클릭 시 브라우저 console에 newTodoItem값을 출력하는 로직을 추가했다.

추가 버튼 클릭 시 입력한 텍스트가 console에 출력된다.

정상적으로 출력되는 것을 확인했으니 console 코드는 삭제하고 addTodo메소드에 로컬스토리지에 저장하는 코드를 추가한다. (예제에서는 localStorage의 키, 값 모두 입력받은 텍스트로 지정한다)

/* /src/components/TodoInput.vue > <script></script> */

export default {
    data(){
        return {
            newTodoItem: ''
        }
    },
    methods: {
        addTodo(){
            localStorage.setItem(this.newTodoItem, this.newTodoItem);
        }
    }
}

추가 버튼을 누르면 localStorage에 입력된 텍스트가 저장된다.

사용자가 값을 입력하지 않고 추가 버튼을 누를 시에는 localStorage에 값이 저장되지 않게 예외처리를 해주고, 값을 저장한 뒤에는 newTodoItem값을 초기화 시키는 메소드를 추가, 호출한다.

/* /src/components/TodoInput.vue > <script></script> */

export default {
    data(){
        return {
            newTodoItem: ''
        }
    },
    methods: {
        addTodo(){
            //inputbox 빈값인지 체크, 빈값이 아니면 로직 수행
            if(this.newTodoItem !== ''){
                //inputbox에 입력된 텍스트의 앞, 뒤 공백문자열 제거
                var value = this.newTodoItem && this.newTodoItem.trim();
                localStorage.setItem(value, value);
                //inputbox 초기화
                clearInputbox();
            }
        },
        clearInputbox(){
            this.newTodoItem = '';
        }
    }
}

아이템이 추가 될때마다 newTodoItem값이 초기화된다.

newTodoItem값을 초기화 시키는 로직을 addTodo메소드에 넣어도 무방하지만 이는 단일 책임 원칙이라는 객체 지향 프로그래밍의 디자인패턴을 지향하기 위하여 별도의 메소드 clearInputbox를 생성, 호출시켰다. 단일 책임 원칙이란 함수 하나가 하나의 기능만 담당하도록 설계하는 방식이다. 

(계속..)

 

2019/09/05 - [vue.js] - Vue.js To Do List 만들기 #1 프로젝트 생성

Vue.js To Do List 만들기 #1 프로젝트 생성

2019/07/24 - [vue.js] - vue.js 입문

vue.js 입문