# 데이터 처리 / 렌더링

# 데이터 로드

BookList.vue 컴포넌트 파일을 생성합니다. shop.js 파일을 불러들인 다음 created 라이프 사이클 훅 함수에서 shop.getBooks() 메서드를 실행하여 컴포넌트 books 데이터에 데이터를 할당합니다.

import shop from "@/api/shop";
export default {
  name: "BookList",
  data: () => ({
    books: []
  }),
  created() {
    shop.getBooks(books => (this.books = books));
  }
};

# 데이터 바인딩

도서 데이터를 순환하여 아이템의 제목, 가격 정보를 출력하는 템플릿 코드를 작성합니다.

<div class="book-list">
  <h1>도서 목록</h1>
  <ul>
    <li
      v-for="(book,i) in books"
      :key="i"
    >{{ book.name }} / {{ book.price }}</li>
  </ul>
</div>

# 컴포넌트 렌더링

BookList 컴포넌트를 App 컴포넌트에 로드한 후, 사용하여 화면에 렌더링 합니다.

<template>
  <div id="app">
    <BookList/>
  </div>
</template>

<script>
import BookList from "@/components/BookList.vue";

export default {
  name: "app",
  components: { BookList }
};
</script>