[ Laravel + Vue.js ] 나만의 To Do List 만들기 - DB에서 data 받아오기

DB에서 Data 받아와서 화면에 뿌려주기

 

created 훅을 이용해서 DB값을 받고 data에 저장을 합니다. 

여기서 created 훅이 무엇인지 더욱 알기 위해서는 구글에 Vue 라이프싸이클을 검색해서 좀 더 자세히 알아보시길 추천

created는 쉽게말하면 vue 인스턴스가 생성이되고 DOM에 부착되기전으로 vue의 data에 접근이 가능하기 때문에 

외부로부터 데이터를 받아와서 vue의 data에 넣어주는 경우에 많이 사용이 된다. 

 

created() {        
        axios.get('api/todo').then(res => {
            this.ToDoList = res.data.ToDoList;           
        });     
    },

이번에는 데이터를 가져오기 때문에 axios.get을 이요합니다. 

 

api.php

Route::get('/todo', [ToDoListController::class, 'index']);

 

ToDoListController.php

public function index() {
        $list_arr = ToDoList::all();           
        
        return response()->json([
            'list_arr' => $list_arr
        ], 200);
    }

ToDoList Table에 있는 데이터를 모두 가져오고 그것을 JSON데이터로 다시 요청한 위치로 보내줍니다. 

 

 

 

data() {
        return {            
            ToDoList: [], // ToDo Data를 저장하기 위함
        }
    },

data()에서 ToDoList라는 변수를 초기화를 해주고 

 

created() {        
        axios.get('api/todo').then(res => {
            this.ToDoList = res.data.ToDoList;           
        });     
    },

Data받아노느 것을 성공했을 때, 이 변수안에 받아온 데이터를 넣습니다.

그러면, 성공적으로 DB의 데이터를 받아와 Vue의 data 에 저장을 하게 됩니다. 

 

그러면 이제 이 데이터를 이용해 화면에 보여주는 작업이 필요합니다.

 

 

여기서 이 데이터를 보여주는 것은 새로운 컴포넌트를 이용해서 보여줄 것 입니다. 

 

 

자식 컴포넌트 사용

<script>
import ToDoView from './ToDoView.vue';

	export default {
    	components: {
        	ToDoView,
        }
    }
</script>

script에 사용할 컴포넌트를 import를 하고 components에 해당 컴포넌트를 선언해줍니다. 

 

<template v-for="ToDo in ToDoList" :key="ToDo.id">
	<ToDoView :to-do="ToDo" @onClickToDetail="onClickRedirect(ToDo.id)" @re-get-list="reGetList"/>                                  
</template>

그러면 해당 컴포넌트를 태그처럼 사용할 수 있습니다,  <ToDoList /> 이런식으로 사용이 가능하다. 

 

위의 코드에서 사용된 Vue 문법설명

v-for

우리가 프로그래밍에서 사용하는 for와 동일합니다. 반복문을 사용하는 것

v-for문을 사용할 땐, :key 설정이 반드시 필요한데 이건 인덱스에 해당합니다.

 

v-for="ToDo in ToDoList"

위의 코드는 ToDoList (array)안에 있는 원소를 하나씩 꺼내서 ToDo라는 이름으로 받아오는 것 

 

부모 컴포넌트에서 자식 컴포넌트로 데이터 보내기

<ToDoList :to-do="ToDo" />

 

created에서 받아온 데이터를 자식 컴포넌트에서 사용해서 출력을 해줘야하니까 부모의 컴포넌트에서 자식 컴포넌트로 데이터를 보내느 작업이 필요합니다.

 

그게 :to-do="ToDo"로 자식 컴포넌트에 ToDo라는 이름으로 데이터를 보내는 것 

---

 

자식 컴포넌트 ToDoView.vue

props: {
        toDo: {
            type:Object,            
        },
    },

부모 컴포넌트에서 받아온 데이터는 props를 통해서 선언을 해야 사용이 가능합니다. 

 

<div>
	<div                    
		class="grid grid-cols-6 border-2 rounded hover:bg-gray-400 my-2"     
    >
		{{ toDo.title }}
	</div>
</div>

 

 

template에서 변수를 사용하기 위해서는 {{ }} 라는 기호를 사용하여 그 안에 적어주면 됩니다. 

toDo 데이터는 Object 타입으로 그안에 값에 접근하기 위해서는 "."접근자를 이용해서 값을 가져오는 것이 가능 

 

이렇게 구현하게 되면, 위의 v-for을 이용해서 해당 array 길이 만큼 코드가 반복되어 To Do가 하나씩 하나씩  자식 컴포넌트로 데이터를 보내어 화면에 보여주는 것