Vue로 어플리케이션 만들기_ Todo List(3)

1.화면단 구성하기

TodoList.vue

TodoList는 추가한 값들이 저장되고, 저장된 것들을 가져와서 차례대로 보여줄 컴포넌트입니다.

간단하게 로컬스토리지에 저장해서 보여지도록 하겠습니다.

<template>
    <section>
        <transition-group name="list" tag="ul">
            <li v-for="(todoItem, index) in propsdata" v-bind:key="todoItem" class="shadow">
                <font-awesome-icon class="checkBtn" icon="check" aria-hidden="true" />
                {{todoItem}}
                <span class="removeBtn" type="button" @click="removeTodo(todoItem, index)">
                    <font-awesome-icon icon="trash" aria-hidden="true" />
                </span>
            </li>
        </transition-group>
    </section>
</template>

1) transition-group태그는 trasition의 뷰 애니메이션을 구현하기 위한 태그로 데이터 추가, 변경, 삭제에 대해서 페이드 인이나 페이드 아웃 등의 여러가지 애니메이션 효과를 줄 수 있습니다.

 

2) v-for은 지정된 갯수만큼 반복해서 html을 표시하는 반복문 디렉티브 입니다.

여기서 반복시킬 propsdata는 상위 컴포넌트로부터 전달받은 데이터를 이용할 예정입니다.

상위 컴포넌트인 App.vue에서 보내주지 않은 지금 상태에서는 prosdata가 로컬스토리지에서 가져온 데이터임을 가정하고 작성합니다.

 

상위 컴포넌트에서 가져온 propsdata를 돌려서 나온 todoItem들을 <li>태그 안에 담을 예정입니다.

{{ }} 큰 대괄호는 HTML상에 변수 값 즉, 데이터를 표시하기 위한 표기 기호입니다.

propsdata에서 가져온 여러 개의 데이터를 하나씩 todoItem으로 뽑아서 저 큰 대괄호 안에 넣습니다.

 

v-for 디렉티브를 사용할 때 key 속성을 반드시 지정해주어야 합니다.

 

3) 우측에는 휴지통 아이콘을 선택했을 때, removeTodo 메소드로 이동하도록 지정해줍니다.

 

ListTodo.vue의 "스크립트 부분"

<script>
    export default{
        props: ["propsdata"],
        methods: {
            removeTodo(todoItem, index){
                this.$emit("removeTodo", todoItem, index);
            }
        }
    };
</script>

상위 컴포넌트에서 가져온 propsdata를 props 속성에 넣고, 휴지통 아이콘을 선택했을 때 실행되는 메소드인 removeTodo메소드를 만듭니다.

 

그리고 emit함수를 이용해 아이템의 값과 index 정보를 상위로 보냅니다.

그 이유는 즉각적으로 바로 컴포넌트에 반영하기 위해서는 모든 컴포넌트에 상태가 공유되어야 하기 때문입니다.

 

 

ListTodo.vue의 "css 부분"

<style scoped>
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

transition-group태그에 대한 애니메이션을 조정..

enter-active와 leave-active는 애니메이션을 조정하는 트래지션 클래스들입니다.

 

 

 

 

TodoFooter.vue

Footer부분에는 한꺼번에 모든 list들을 지우는 버튼을 구현합니다.

<template>
    <div class="clearAllContainer" @click="clearTodo">
        <span class="clearAllBtn">Clear All</span>
    </div>
</template>

<script>
    export default{
        methods: {
            clearTodo(){
                this.$emit("removeAll");
            }
        }
    };
</script>

"Clear All" 버튼을 클릭하면, clearTodo메소드가 호출됩니다.

clearTodo 역시 즉각적으로 List가 지워진 것을 표시하기 위해 상위 컴포넌트로 "removeAll"이라는 이름의 이벤트 신호를 보냅니다.

 

 

2. 최상위 컴포넌트 App.vue

각각의 컴포넌트들이 다 같이 만나지는 App.vue를 작성합니다.

작성 시에 각 컴포넌트에 emit으로 보낸 이번트명을 잘 구분합니다.

 

원래 코드

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

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

export default {
  data(){
    return{
      todoItems:[]
    };
  },
  components: {
    TodoHeader,
    TodoFooter,
    TodoInput,
    TodoList
  }
}
</script>

 

변경 코드

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodo="addTodo"></TodoInput>
    <TodoList v-bind:propsdata="todoItems" @removeTodo="removeTodo"></TodoList>
    <TodoFooter v-on:removeAll="clearAll"></TodoFooter>
  </div>
</template>

1) v-on은 설명한대로 emit으로 보내온 이벤트들을 감지해서 각자 해당 메소드들로 보냅니다.

2) v-bind는 데이터와 HTML 상의 요소를 묶어줍니다.

   스크립트 부분에서 선언해줄 TodoItems 들을 propsdata에 묶어 담아서 보낼 것입니다.

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

export default {
  data(){
    return{
      todoItems:[]
    };
  },
  created(){
    if(localStorage.length > 0){
      for(let i = 0; i < localStorage.length; i++){
        if(localStorage.key(i) != "loglevel:webpack-dev-server"){
          this.todoItems.push(localStorage.key(i));
        }
      }
    }
  },
  methods: {
    addTodo(todoItem){
      localStorage.setItem(todoItem, todoItem);
      this.todoItems.push(todoItem);
    },
    clearAll(){
      localStorage.clear();
      this.todoItems = [];
    },
    removeTodo(todoItem, index){
      localStorage.removeItem(todoItem);
      this.todoItems.splice(index, 1);
    }
  },

  components: {
    TodoHeader: TodoHeader,
    TodoInput: TodoInput,
    TodoList: TodoList,
    TodoFooter: TodoFooter
  }
};
</script>

1) created는 처음 vue를 실행할 때 실행되는 부분을 명시한 것입니다.

따라서 앱을 처음 생성했을 때 스토리지에 내용이 있다면 들어있는 내용들을 가져와 List에 뿌려줄 것이므로,

그 내용들을 가져와서 todoItems 배열에 넣도록 코드를 짰습니다.

 

2) methods안에는 emit으로 보낸 곳들이 최종적으로 실행되는 곳입니다.

  ▼ addTodo 메소드는 Input부분에서 입력되어 로컬스토리지에 emit을 통해서 인자로 담져온 값을 넣고,

      data에 선언된 todoItems 배열에도 넣어줍니다.

 

  ▼ clearAll 메소드는 Footer에서 "clear All" 버튼을 누르면 넘어와서 스토리지를 모두 비워주고,

       data의 todoItems 또한 초기화시켜줍니다.

 

  ▼ removeTodo메소드는 List에서 휴지통을 클릭했을 때 해당 값과 인데그 정보를 메게변수로 해당하는 곳의 스토리지를

       제거하고, 자바스트립트 배열에 사용하는 splice를 이용해 해당하는 순서의 배열을 제거합니다.