Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 7 (프론트 todoList GET)

안녕하세요.

 

이번 포스팅에서는 CRUD 기능 구현을 해보도록 하겠습니다.

전 포스팅에서 우리는 DRF(Djang REST Framework) Server 에서 데이터를 가져오는 것을 실습해보았습니다.

 

우리는 Django 에서 GET 만 생성한 것이 아닌 GET, POST, Patch, Delete 와 같은 것들을 구현하였습니다.

오늘은 이것들을 활용하여 실제 데이터를 백엔드 서버에 전달하여 DB에 저장하는 것을 만들어보도록 하겠습니다.

 

데이터를 가져와 리스트에 보여지는 것을 구현해보기

데이터를 가져와 화면에 보여지게하려면 제가 생각한 방법은 2가지가 있었습니다.

 

1. methods 를 만들어 데이터를 가져와서 vue인스턴스의 data 에 저장하는 방법

2. mounted 를 사용하여 페이지 로드 시 데이터를 가져오는 방법

 

1번 방법은 어떠한 버튼을 누르거나 특정 동작을해서 메소드를 실행시켜야하기에 맞지 않다고 판단하였고,

2번 방법은 vue.js 라이프사이클을 참고하시면 아실 수 있지만 DOM 객체가 생성될 때 동작되어 사용하기에 적합하다고 판단하였습니다.

 

// App.vue

<script>
import axios from "axios";
import TodoHeader from "./components/TodoHeader.vue";
import TodoContent from "./components/TodoContent.vue";
import TodoFooter from "./components/TodoFooter.vue";

let url = "http://localhost:8000/api/todo/";  // drf server addr

export default {
  data: () => {
    return {
      todoList: []
    };
  },
  components: {
    "todo-header": TodoHeader,
    "todo-content": TodoContent,
    "todo-footer": TodoFooter
  },
  mounted() { // DOM 객체 생성 후 drf server 에서 데이터를 가져와 todoList 저장
    axios({
      method: "GET",
      url: url 
    })
      .then(response => {
        this.todoList = response.data;
      })
      .catch(response => {
        console.log("Failed to get todoList", response);
      });
  },
  methods: {  // CRUD 로직이 들어갈 부분
    getTodoList: function() {},
    updateTodoList: function() {},
    deleteTodoList: function() {}
  }
};
</script>

좋습니다. 그럼 이제 데이터가 잘 들어왔는지 검증해볼 필요가 있겠죠?

그 방법은 아주 간단합니다. App.vue template 맨 위에다가 {{ todoList }} 를 추가해주겠습니다.

<template>
  <div>
    {{ todoList }}
    <todo-header></todo-header>
    <todo-content></todo-content>
    <todo-footer></todo-footer>
  </div>
</template>

상단에 보이는 drf server 에서 받은 response.data

데이터가 잘 들어있네요. 아주 뿌듯합니다.

 

테스트를 위해 작성한 {{ todoList }} 를 없애주고, Content 에 받은 데이터를 props 로 내려서 화면에 이쁘게 보여지도록 해보겠습니다.

 

상위컴포넌트에서 하위컴포넌트로 todoList 데이터 넘기기 (props)

간단하게 props 에 대해서 사용법을 설명하고 실습을 진행하도록 하겠습니다. 참고

 

Vue.js 는 상위 컴포넌트(App.vue) 와 하위 컴포넌트(TodoHeader, TodoContent..) 간에 통신하기 위해서는 2가지 도구가 필요합니다.

먼저 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때는 props 라는 속성이 필요하고, 하위 컴포넌트에서 상위 컴포넌트로 데이터나 어떠한 동작을 하고 싶은 경우에는 event emit 이라는 것이 필요합니다.

 

우리는 상위 컴포넌트에서 받은 todoList 정보를 하위 컴포넌트(TodoContent)로 전달하는 상황이라고 이해하시면 되겠습니다.

<!-- App.vue -->

<template>
  <div>
    <todo-header></todo-header>
    <todo-content v-bind:propsdata="todoList"></todo-content> <!-- v-bind:하위컴포넌트 속성명="상위 컴포넌트 전달할 데이터명"  -->
    <todo-footer></todo-footer>
  </div>
</template>

위와 같이 설정해주시고, components 에 등록해주면 App.vue 에서는 할 일이 끝났습니다. (export default 안에 conponents)

여기서 상위 컴포넌트 데이터명은 todoList 가 되겠죠? 그렇다면 여기서 의문점이 하나 생겨야 합니다.

"propsdata 는 어디서 만들어진거지?" 에 대해서 알아보러 TodoContent 로 이동해보겠습니다.

// TodoContent.vue

export default {
  props: ['propsdata']
}

여기있었네요. props 라는 것을 지정하고 그 안에 지정한 이름을 하위컴포넌트 속성명이라고 생각하시면 됩니다.

항상 어떠한 것을 만들었으면 검증하는 과정이 필요합니다. TodoContent 에 우리가 원하는 데이터가 들어갔는지 확인해보기 위해

Vue 개발자 도구를 이용하여 확인해보겠습니다.

상위 컴포넌트 -> 하위 컴포넌트 데이터 전달 검증

데이터가 잘 넘어왔다면 이제 화면에 보여줘야겠죠?

v-for 을 사용하여 데이터를 넣어주겠습니다.

<!-- TodoContent.vue -->


<template>
  <div>
    <v-container fluid>
      <v-layout column>
        <v-flex xs12>
          <h3 class="subject">what is your plan?</h3>
        </v-flex>
        <v-flex column>
          <v-form v-on:submit="submitForm">
            <v-text-field v-model="title" :counter="64" label="Title" required></v-text-field>
            <v-text-field v-model="content" :counter="255" label="Content" required></v-text-field>

            <v-btn @click="create" type="submit" style="background: green">create</v-btn>
            <v-btn @click="clear" type="submit" style="background: red">clear</v-btn>
          </v-form>
        </v-flex>


		
        <v-flex class="todoList" column>
          <v-card max-width="600" tile>
            <v-list-item v-for="(data, index) in propsdata" v-bind:key="index"> <!-- index python enumurate 와 같이 숫자가 들어가게 됩니다.--> 
              <v-list-item-content>
                <v-list-item-title>{{ data.title }}</v-list-item-title> <!-- for 문이 돌면서 data.title 출력합니다. -->
                <v-list-item-subtitle>{{ data.description }}</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-card>
        </v-flex>
        
        
        
        
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  props: ["propsdata"]
};
</script>

<style>
.subject {
  color: blue;
  font-style: oblique;
  padding: 30px;
  text-align: center;
}
.todoList {
  margin: 30px 0px 30px 0px;
}
</style>

백엔드 프로젝트를 만들 때 생성했던 테스트 데이터들이 보이는 것을 확인할 수 있습니다.

하지만 바로 생성을 했을 때 제대로 생성되는지도 검증이 필요하겠죠?

 

localhost:8000 DRF server

위와 같이 drf server 에서 Todo Model 에 데이터를 생성해주고, 프론트로 돌아와 제대로 들어오는지 확인해보겠습니다.

Goods

좋습니다. 오늘은 GET 에 대한 기능 구현을 진행했습니다.

다음 포스팅에서는 create button 클릭 시 데이터가 생성되는 것과 CLEAR 시에 form 태그 안에 입력한 내용이 다 지워지는 것을

구현해보도록 하겠습니다.

 

감사합니다.