๐ŸŽ [Vue TodoList] 4. ๊ธฐ์กด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์กฐ์˜ ๋ฌธ์ œ์  ํ•ด๊ฒฐํ•˜๊ธฐ

sujinยท2021๋…„ 12์›” 28์ผ
0

Projects

๋ชฉ๋ก ๋ณด๊ธฐ
4/4
post-thumbnail

๐Ÿ“Œํ˜„์žฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์กฐ์˜ ๋ฌธ์ œ์ 

- ํ•  ์ผ์„ ์ž…๋ ฅํ–ˆ์„ ๋•Œ, ํ•  ์ผ ๋ชฉ๋ก์— ๋ฐ”๋กœ ๋ฐ˜์˜๋˜์ง€ ์•Š์Œ
- ํ•  ์ผ์„ ๋ชจ๋‘ ์‚ญ์ œํ–ˆ์„ ๋•Œ, ํ• ์ผ ๋ชฉ๋ก์— ๋ฐ”๋กœ ๋ฐ˜์˜๋˜์ง€ ์•Š์Œ

1. ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ์œ„ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์กฐ ๊ฐœ์„ 

  • ์›์ธ
    • ํ™”๋ฉด์„ 4๊ฐœ์˜ ์˜์—ญ(TodoHeader TodoInput TodoList TodoFooter)์œผ๋กœ ๋ถ„๋ฆฌํ•ด ๋†“์•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ์˜์—ญ์˜ ์ฒ˜๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋‹ค๋ฅธ ์˜์—ญ์—์„œ ๊ฐ์ง€ํ•˜์ง€ ๋ชปํ•œ๋‹ค.

  • ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

    • ํ˜„์žฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ๊ฐ๊ฐ์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ทฐ ๋ฐ์ดํ„ฐ ์†์„ฑ์„ ๊ฐ–๊ณ  ์žˆ๋‹ค.

      (TodoInput-newTodoItem, TodoList-todoItems)

    • ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€, TodoInput, TodoList๋Š” ๋ชจ๋‘ todoItems๋ผ๋Š” ๊ฐ™์€ ์„ฑ๊ฒฉ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.

    • ์ตœ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์ธ App ์ปดํฌ๋„ŒํŠธ์— todoItems ๋ผ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ •์˜ํ•˜๊ณ  ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ TodoList์— Props๋กœ ์ „๋‹ฌํ•œ๋‹ค.

  • ๋‹ฌ๋ผ์ง„ ์ 

    • ํ•  ์ผ ๋ฐ์ดํ„ฐ ์ถ”๊ฐ€, ์‚ญ์ œ๋ฅผ ๋ชจ๋‘ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ TodoInput, TodoList์—์„œ ํ–ˆ์—ˆ๋‹ค๋ฉด,
    • ๋ทฐ ๋ฐ์ดํ„ฐ ์†์„ฑ todoItems์™€ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์˜ ๋ฐ์ดํ„ฐ ์กฐํšŒ, ์ถ”๊ฐ€, ์‚ญ์ œ๋ฅผ ๋ชจ๋‘ App์ปดํฌ๋„ŒํŠธ์—์„œ ํ•œ๋‹ค.
    • ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋“ค์€ ์ด๋ฒคํŠธ ๋ฐœ์ƒ๋งŒ ์‹คํ–‰ํ•œ๋‹ค.

2. props์™€ ์ด๋ฒคํŠธ ์ „๋‹ฌ์„ ์ด์šฉํ•ด ํ•  ์ผ ์ž…๋ ฅ ๊ธฐ๋Šฅ ๊ฐœ์„ ํ•˜๊ธฐ

1) ์ตœ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์ธ App์— ๋ฐ์ดํ„ฐ ์†์„ฑ todoItems๋ฅผ ์„ ์–ธํ•œ๋‹ค.
2) ์„ ์–ธํ•œ todoItems ์†์„ฑ์„ TodoList์ปดํฌ๋„ŒํŠธ์— props๋กœ ์ „๋‹ฌํ•œ๋‹ค.
3) TodoInput์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ์— ํ• ์ผ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ App์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌ ํ•  ์ˆ˜ ์žˆ๊ฒŒ v-on ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
4) ํ•ด๋‹น ์ด๋ฒคํŠธ๋ฅผ ๋ฐ›์•„์„œ ์‹คํ–‰ํ•  ๋ฉ”์„œ๋“œ๋„ ์ถ”๊ฐ€ํ•œ๋‹ค.

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <!-- 3 -->
    <TodoInput v-on:inputTodo = "addTodo"></TodoInput>
    <!-- 2 -->
    <TodoList v-bind:propsdata = "todoItems"></TodoList> 
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
  export default{
    // 1 
    data(){
      return{
        todoItems: []  
      }
    },
    methods:{
      // 4
      addTodo(){
          // ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋กœ์ง
      }
    },
    components: {
      'TodoHeader' : TodoHeader,
      'TodoInput' : TodoInput,
      'TodoList' : TodoList,
      'TodoFooter' : TodoFooter
    }
}
</script>
...

2-1. TodoInput ์ปดํฌ๋„ŒํŠธ์™€ TodoList ์ปดํฌ๋„ŒํŠธ ์ˆ˜์ •ํ•˜๊ธฐ

  • TodoInput์ปดํฌ๋„ŒํŠธ์˜ addTodo() ๋ฉ”์„œ๋“œ ์ถ”๊ฐ€
...
<script>
  export default{
    export default{
        data(){
            return{
                newTodoItem: ''
            }
        },
        methods: {
            addTodo(){
                if(this.newTodoItem !== ""){
                    var value = this.newTodoItem && this.newTodoItem.trim();
                    // localStorage.setItem(value, value) ์‚ญ์ œ
                    this.$emit('inputTodo', value); //์ถ”๊ฐ€, ์ด๋ฒคํŠธ ์ „๋‹ฌํ•  ๋•Œ ํ•  ์ผ ํ…์ŠคํŠธ ๊ฐ’์ธ value๊ฐ์ฒด๋ฅผ ์ธ์ž ๊ฐ’์œผ๋กœ ์ „๋‹ฌํ•œ๋‹ค.
                }
            },
            clearInput(){
                this.newTodoItem = '';
            }
        }
    }
}
</script>
...

  • App์ปดํฌ๋„ŒํŠธ์˜ addTodo() ๋ฉ”์„œ๋“œ ์ถ”๊ฐ€
    • TodoInput ์ปดํฌ๋„ŒํŠธ์—์„œ App์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฒคํŠธ๋ฅผ ๋ณด๋‚ด๋ฉด App์ปดํฌ๋„ŒํŠธ์˜ addTodo()๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.
    • ์ธ์ž ๊ฐ’ todoItem์€ TodoInput์ปดํฌ๋„ŒํŠธ์—์„œ ์˜ฌ๋ ค ๋ณด๋‚ธ ํ•  ์ผ ํ…์ŠคํŠธ ๊ฐ’์ด๋‹ค.
    • ์ด ๊ฐ’(todoItem)์„ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•˜๊ณ , APP์ปดํฌ๋„ŒํŠธ์˜ todoItems ๋ฐ์ดํ„ฐ ์†์„ฑ์—๋„ ์ถ”๊ฐ€ํ•œ๋‹ค.
...
<script>
  export default{
    data(){
      return{
        todoItems: []  
      }
    },
    methods:{
      addTodo(todoItem){ 
          localStorage.setItem(todoItem,todoItem);
          this.todoItem.push(todoItem);
      }
    },
    components: {
      'TodoHeader' : TodoHeader,
      'TodoInput' : TodoInput,
      'TodoList' : TodoList,
      'TodoFooter' : TodoFooter
    }
}
</script>

...

  • TodoList์ปดํฌ๋„ŒํŠธ <template> ๋‚ด์šฉ ์ˆ˜์ •
    • v-for ๋””๋ ‰ํ‹ฐ๋ธŒ์˜ ๋ฐ˜๋ณต ๋Œ€์ƒ์„ porpsdata๋กœ ๋ณ€๊ฒฝ
    • ๊ธฐ์กด์—๋Š” TodoList์˜ ๋ฐ์ดํ„ฐ ์†์„ฑ์ธ datatItems ์˜€์ง€๋งŒ, ์ด์ œ๋Š” App์ปดํฌ๋„ŒํŠธ์˜ todoItems๋ฐ์ดํ„ฐ์˜ ๊ฐœ์ˆ˜๋งŒํผ ๋ชฉ๋ก ์•„์ดํ…œ์„ ์ƒ์„ฑํ•œ๋‹ค.
  <template>
    <section>
        <ul>
            <li v-for= "(todoItem, index) in propsdata" :key="todoItem" class="shadow">
                <i class="checkBtn fa fa-check"></i>
                {{ todoItem }}
                <span class="removeBtn" type="button" v-on:click = "removeTodo(todoItem, index)">
                    <i class="fa fa-trash"></i>
                </span>
            </li>
        </ul>
    </section>
  </template> 
  

2-2. TodoList์—์„œ ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ ์ œ๊ฑฐํ•˜๊ธฐ

  • TodoList์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋˜ ๋ฐ์ดํ„ฐ ์†์„ฑ todoItems๋Š” ๋ถˆํ•„์š”ํ•˜๋ฏ€๋กœ ์ œ๊ฑฐํ•œ๋‹ค.
    • App์ปดํฌ๋„ŒํŠธ์˜ todoItems์—์„œ propsdata๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์—
  • created() ๋กœ์ง๋„ App์ปดํฌ๋„ŒํŠธ๋กœ ์˜ฏ๊ฒจ์ค€๋‹ค.
    • ํ•  ์ผ ๋ฐ์ดํ„ฐ(todoItems)๋Š” ๋ชจ๋‘ App์ปดํฌ๋„ŒํŠธ์—์„œ ๊ด€๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์—
...
<script>
export default{
  data() { //์ œ๊ฑฐ
    return {
      todoItems : [] 
    }
  },
  props: ['porpsdata'],
  created() { // App.vue๋กœ ์ด๋™
    if(localStorage.length > 0){
      for(var i = 0; i < localStorage.length; i++){
        this.todoItems.push(localStorage.key(i));
      }
    }
  },
  
  methods: {
    removeTodo(todoItem, index) {
      localStorage.removeItem(todoItem);
      this.todoItems.splice(index, 1);
    }
  }
}
</script>
...

3. ์ด๋ฒคํŠธ ์ „๋‹ฌ์„ ์ด์šฉํ•ด Clear All ๋ฒ„ํŠผ ๊ธฐ๋Šฅ ๊ฐœ์„ ํ•˜๊ธฐ

  • ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ์ด๋ฒคํŠธ ์ „๋‹ฌ ๋ฐฉ์‹์„ ์‚ฌ์šฉ
    • ์ด๋ฒคํŠธ ์ „๋‹ฌ : ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐœ์ƒ์‹œํ‚จ ์ด๋ฒคํŠธ๋ฅผ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ›์•„ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋งค์„œ๋“œ๋ฅผ ๋™์ž‘์‹œํ‚ค๋Š” ๊ฒƒ
  • ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ TodoFooter์—์„œ ๋ฐœ์ƒ์‹œํ‚ฌ ์ด๋ฒคํŠธ ์ด๋ฆ„์„ removeAll , ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ App์—์„œ ๋ฐ›์•„ ์‹คํ•ผ์‹œํ‚ฌ ๋งค์„œ๋“œ ์ด๋ฆ„์„ clearAll() ์„ค์ •

3-1. ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ App ์ฝ”๋“œ ์ˆ˜์ •ํ•˜๊ธฐ

<template>
  <div id="app">
    ...
    <TodoFooter v-on:removeAll = "clearAll"></TodoFooter>
  </div>
</template>

<script>
  export default{
   ...
    methods:{
       ... 
      clearAll(){
        localStorage.clear(); // ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‘ ์‚ญ์ œ
        this.todoItems = []; // todoItems์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋น„์›€
      },
    },
    ...
  }
</script>
...

3-2. ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ ์ˆ˜์ •ํ•˜๊ธฐ

<script>
export default{
    methods: {
        clearTodo(){
            // localStorage.clear(); ์‚ญ์ œ
            this.$emit('removeAll');  //์ถ”๊ฐ€ 
        },
    }
}
</script>

4. ์ด๋ฒคํŠธ ์ด์šฉํ•ด ์‚ญ์ œ ๊ธฐ๋Šฅ ๊ฐœ์„ ํ•˜๊ธฐ

  • todoList์ปดํฌ๋„ŒํŠธ์˜ ๊ฐ ํ•  ์ผ ์•„์ดํ…œ์„ ์‚ญ์ œํ•˜๋Š” ๋กœ์ง์—๋„ ์ด๋ฒคํŠธ ์ „๋‹ฌ ๋ฐฉ์‹์„ ์ ์šฉํ•œ๋‹ค.

App.vue

<template>
  <div id="app">
    ...
    <TodoList v-bind:propsdata = "todoItems" v-on:removeList = "clearList"></TodoList>
    ...
  </div>
</template>

<script>
  ...
  export default{
    ...
    methods:{
      ...
      clearList(todoItem, index){
        localStorage.removeItem(todoItem);
        this.todoItems.splice(index, 1); //splice() ๋ฉ”์†Œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ๊ธฐ์กด ์š”์†Œ๋ฅผ ์‚ญ์ œ ๋˜๋Š” ๊ต์ฒดํ•˜๊ฑฐ๋‚˜ ์ƒˆ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฐฐ์—ด์˜ ๋‚ด์šฉ์„ ๋ณ€๊ฒฝ
      }
    },
   ...
  }
</script>
...

TodoList.vue

  • ํ•  ์ผ ๋ชฉ๋ก์—์„œ ์‚ญ์ œ ์•„์ด์ฝ˜์„ ํด๋ฆญํ•˜๋ฉด TodoList์ปดํฌ๋„ŒํŠธ์˜ removeTodo ๋ฉ”์„œ๋“œ์—์„œ removeList๋ผ๋Š” ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ ์‹œ์ผœ App์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌํ•œ๋‹ค.
  • ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ์„ ํƒํ•œ ํ•  ์ผ์˜ ํ…์ŠคํŠธ(todoItem)์™€ ์ˆœ์„œ(index)๋ฅผ ๋ณด๋‚ธ๋‹ค.
  • ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ์ธ์ž๋ฅผ ํ•œ๊ป˜ ์ „๋‹ฌ ํ•  ์ˆ˜ ์žˆ๋‹ค.
...
<script>
export default{
  ...
  methods: {
    removeTodo(todoItem, index) {
      // localStorage.removeItem(todoItem); App.vue clearList(todoItem, index) ๋ฉ”์†Œ๋“œ๋กœ ์ด๋™
      // this.todoItems.splice(index, 1); App.vue clearList(todoItem, index) ๋ฉ”์†Œ๋“œ๋กœ ์ด๋™
      this.$emit('removeList', todoItem, index); // ์ถ”๊ฐ€
    }
  }
}
</script>
...

profile
๊ฐœ๋ฐœ๋Œ•๋ฐœ

0๊ฐœ์˜ ๋Œ“๊ธ€