- ํ ์ผ์ ์
๋ ฅํ์ ๋, ํ ์ผ ๋ชฉ๋ก์ ๋ฐ๋ก ๋ฐ์๋์ง ์์
- ํ ์ผ์ ๋ชจ๋ ์ญ์ ํ์ ๋, ํ ์ผ ๋ชฉ๋ก์ ๋ฐ๋ก ๋ฐ์๋์ง ์์
TodoHeader
TodoInput
TodoList
TodoFooter
)์ผ๋ก ๋ถ๋ฆฌํด ๋์๊ธฐ ๋๋ฌธ์ ํ ์์ญ์ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ค๋ฅธ ์์ญ์์ ๊ฐ์งํ์ง ๋ชปํ๋ค.ํด๊ฒฐ๋ฐฉ๋ฒ
ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ์์๋ง ์ฌ์ฉํ ์ ์๋ ๋ทฐ ๋ฐ์ดํฐ ์์ฑ์ ๊ฐ๊ณ ์๋ค.
(TodoInput
-newTodoItem, TodoList
-todoItems)
๋ก์ปฌ ์คํ ๋ฆฌ์ง, TodoInput
, TodoList
๋ ๋ชจ๋ todoItems๋ผ๋ ๊ฐ์ ์ฑ๊ฒฉ์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค.
์ต์์ ์ปดํฌ๋ํธ์ธ App
์ปดํฌ๋ํธ์ todoItems ๋ผ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ํ๊ณ ํ์ ์ปดํฌ๋ํธ TodoList
์ Props๋ก ์ ๋ฌํ๋ค.
๋ฌ๋ผ์ง ์
TodoInput
, TodoList
์์ ํ์๋ค๋ฉด, App
์ปดํฌ๋ํธ์์ ํ๋ค.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>
...
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()๋ฉ์๋๋ฅผ ์คํํ๋ค. TodoInput
์ปดํฌ๋ํธ์์ ์ฌ๋ ค ๋ณด๋ธ ํ ์ผ ํ
์คํธ ๊ฐ์ด๋ค.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>
๋ด์ฉ ์์ 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>
TodoList
์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๋ ๋ฐ์ดํฐ ์์ฑ todoItems๋ ๋ถํ์ํ๋ฏ๋ก ์ ๊ฑฐํ๋ค.App
์ปดํฌ๋ํธ์ todoItems์์ propsdata๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ฃผ๊ธฐ ๋๋ฌธ์App
์ปดํฌ๋ํธ๋ก ์ฏ๊ฒจ์ค๋ค.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>
...
TodoFooter
์์ ๋ฐ์์ํฌ ์ด๋ฒคํธ ์ด๋ฆ์ removeAll , ์์ ์ปดํฌ๋ํธ App
์์ ๋ฐ์ ์คํผ์ํฌ ๋งค์๋ ์ด๋ฆ์ clearAll() ์ค์ <template>
<div id="app">
...
<TodoFooter v-on:removeAll = "clearAll"></TodoFooter>
</div>
</template>
<script>
export default{
...
methods:{
...
clearAll(){
localStorage.clear(); // ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ๋ฐ์ดํฐ๋ฅผ ๋ชจ๋ ์ญ์
this.todoItems = []; // todoItems์ ๋ฐ์ดํฐ๋ฅผ ๋น์
},
},
...
}
</script>
...
<script>
export default{
methods: {
clearTodo(){
// localStorage.clear(); ์ญ์
this.$emit('removeAll'); //์ถ๊ฐ
},
}
}
</script>
todoList
์ปดํฌ๋ํธ์ ๊ฐ ํ ์ผ ์์ดํ
์ ์ญ์ ํ๋ ๋ก์ง์๋ ์ด๋ฒคํธ ์ ๋ฌ ๋ฐฉ์์ ์ ์ฉํ๋ค.<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
์ปดํฌ๋ํธ์ removeTodo ๋ฉ์๋์์ removeList๋ผ๋ ์ด๋ฒคํธ๋ฅผ ๋ฐ์ ์์ผ App
์ปดํฌ๋ํธ๋ก ์ ๋ฌํ๋ค....
<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>
...