[Vue.js] import / export 사용하여 데이터바인딩하기

💡 실습 포인트!

• data.js 파일을 만들어 데이터를 담아준 다음 import / export 문법을 사용하여 App.vue 파일로 데이터를 불러와 데이터바인딩을 해보았다.
• 이제 그 다음에는 모달창에 데이터바인딩을 진행해볼 것이다.
• 그나저나 허위매물신고 버튼에 왜 커서를 올리기만 하고 클릭을 안했지..? 괜히 기능 작동 안하는 것처럼 보이게... 

---

💜 사용할 상품 데이터 미리보기

[{
  id : 0,
  title: "Sinrim station 30 meters away",
  image: "https://codingapple1.github.io/vue/room0.jpg",
  content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
  price: 340000
  },
  {
  id : 1,
  title: "Changdong Aurora Bedroom(Queen-size)",
  image: "https://codingapple1.github.io/vue/room1.jpg",
  content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
  price: 450000
  },
  {
  id : 2,
  title: "Geumsan Apartment Flat",
  image: "https://codingapple1.github.io/vue/room2.jpg",
  content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
  price: 780000
  },
  {
  id : 3,
  title: "Double styled beds Studio Apt",
  image: "https://codingapple1.github.io/vue/room3.jpg",
  content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
  price: 550000
  },
  {
  id : 4,
  title: "MyeongIl Apartment flat",
  image: "https://codingapple1.github.io/vue/room4.jpg",
  content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
  price: 680000
  },
  {
  id : 5,
  title: "Banziha One Room",
  image: "https://codingapple1.github.io/vue/room5.jpg",
  content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
  price: 370000
}];

• 서버가 있으면 서버에서 데이터를 받아와서 보여주어야 하지만, 서버 없이 진행하므로 강사님이 데이터를 준비해오셨다.
• 데이터가 적으면 data 보관함에 바로 넣어주어도 되지만, 일반적으로 데이터는 많기 때문에 이번에는 import / export 문법을 이용하여 다른 js 파일에 데이터를 저장한 뒤 가져오는 방식을 사용했다.

---

💜 import / export 문법 사용하기

• 보통 특정 JavaScript 파일에서 만든 변수나 자료를 다른 JavaScript 파일에서 사용하고 싶은 경우 import 와 export 문법을 사용한다.
• 일단 사용하고 싶은 자료가 담긴 파일에서 데이터를 export 를 해야 데이터를 가져와 사용하고 싶은 파일에서 import 하여 사용할 수 있다.
• React 에서 import 와 export 를 공부한 적이 있다면 vue 에서도 import / export 를 사용하는 방법이 똑같다고 생각하면 되므로 자세한 설명은 생략한다.
  (그래도 궁금하다면 React 공부할 때 정리해놓은 자료가 있으니 여기를 클릭!)

🤍 import 한 데이터를 data 보관함에 등록하기

// data.js 에 저장한 데이터를 roomData 라는 변수명으로 import 해주었다.
import roomData from './assets/data'


// data 보관함에는 import 한 roomData 를 rooms 라는 이름으로 저장해주었다.
data(){
    return {
        openModal : false,
        navbar : ['Home', 'Rooms', 'About'],
        rooms : roomData,
        report : [...roomData].fill(0),
    }
},

• 나는 data.js 파일을 만들어 상품 데이터를 저장한 후 roomData 라는 변수명으로 export 해주었다.
• 그리고 App.vue 파일에서 import 할 때에도 roomData 라는 이름으로 import 해주었다.
• 이제 import 한 데이터를 사용하기 위해 data 보관함에 등록하는 과정이 필요한데, 나는 roomData 를 rooms 라는 이름으로 data 보관함에 저장해주었다.
• 그리고 지금 할 필요는 없지만, 신고버튼 클릭시 신고 수를 저장해두는 report 부분은 roomData 가 변경이 될 때마다 수정을 해줄 수는 없기 때문에, roomData 의 사본을 만들어 모든 값을 0으로 초기화해서 사용할 수 있도록 spread 문법과 .fill() 함수를 사용하여 코드를 수정해주었다.
  (새로운 기능이 추가될 때 기존의 기능에 문제가 발생하지 않도록 그 때 그 때 수정해주는 것이 중요하다고 생각한다.)

---

🤍 data 보관함에 등록한 데이터를 데이터바인딩하기

{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
}

 

<div class="card" v-for="(room, i) in rooms" :key="i">
    <img :src="room.image" class="room-image">
    <h4 @click="openModal = true" class="room-name">{{ room.title }}</h4>
    <p>{{ room.price }}원</p>
    <span>신고 수: {{ report[room.id] }}</span> <button class="report" @click="increase(room.id)">허위매물신고</button>
</div>

• 기존에 하드코딩하여 작성해두었던 html 코드를 먼저 v-for 문법을 사용하여 반복문으로 만들어주었다.
  (반복문으로 만드는 자세한 과정은 생략한다. 그냥 규칙 찾아서 줄여버리면 OK!)
• 그리고 데이터바인딩을 진행할 데이터의 형식을 참고하여 위와 같이 코드를 작성하였다.