[to-do-app] 리팩토링: 할일 목록 표시 기능

 

 

 현재 애플리케이션에서 고쳐야 하는 부분 

1. 할 일 추가 시 즉각적으로 화면 목록 반영 ❌
2. 모두 삭제 시 즉각적으로 화면 목록 목록 반영 ❌

현재 애플리케이션에서 고쳐야할 문제점은 위와 같습니다. 화면에 바로바로 반영이 되지 않습니다.

 

 

 

 App.vue 

data 선언

data() {
    return {
        todoItems: [],
    };
},

todoItems 를 배열로 선언합니다.

이렇게 되면 [TodoList.vue] 에 있었던 todoItems 가 [App.vue] 에서 관리가 됩니다.

todoItems 에는 로컬 스토리지에서 가져온 데이터가 들어갑니다.

 

localStorage 에서 데이터 가져오기

// vue life cycle
created() {
    console.log("created");

    // 로컬스토리지에 데이터가 있다면
    if (localStorage.length > 0) {
        for (let i = 0; i < localStorage.length; i++) {
            if (localStorage.key(i) !== "loglevel:webpack-dev-server") {
                // JSON.parse : str -> json 변경
                let item = JSON.parse(
                    localStorage.getItem(localStorage.key(i))
                );

                this.todoItems.push(item);
            }
        }
    }
},

이제 상위에 존재하는 데이터를 하위 컴포넌트인 [TodoList.vue] 에 넘겨야합니다.

이때는 v-bind 키워드를 사용하여 props 를 넘겨줘야합니다.

 

 

 

 TodoList.vue 

상위 컴포넌트 → 하위 컴포넌트 데이터 보내기

<template>
	<div id="app">
		<todo-header />
		<todo-input></todo-input>
		<TodoList v-bind:propsdata="todoItems"></TodoList>
		<TodoFooter />
	</div>
</template>

✔️ v-bind:상위 컴포넌트에서 하위 컴포넌트로 내려보낼 데이터의 이름 = "내려보낼 원본 데이터"

해당 코드에서는

• 내려보낼 데이터의 이름 → propsdata
• 내려보낼 원본 데이터 → todoItems

propsdata 저 부분은 별칭이므로 마음대로 이름을 변경해도 됩니다.

 

props 생성

props: ["propsdata"],

script 부분에 해당 코드를 추가합니다. props 에서 내려받은 propsdata 를 저장한 것 입니다.

 

사용되는 데이터 변경하기

<li
    v-for="(item, index) in propsdata"
    v-bind:key="index"
    class="shadow"
>

todoItems 였던 변수를 propsdata 라고 변경해줍니다.

 

 

 

 결과 확인 

 

 

 

 

 

vue todo

vue 추가

vue 할일추가

vue props

---