6. 실제 데이터 import / export 하기

https://youtu.be/38PWm8TgaV0

Js의 Import / Export

어떤 js 파일의 변수, 함수 등을 다른 js에서 갖다 쓰고 싶으면 최하단에 아래와 같이 작성한다.

//한 개일 때

export default 변수명;

//여러 개일 때

export {변수1, 변수2, 변수3, .....};

그리고 export한 놈을 import 할 때는 아래처럼 작성.

//한 개일 때

import 변수명 from 'export default한 js의 경로명';

//여러 개일 때

import {변수1, 변수2, ...} from 'export default한 js의 경로명';

 

<template>
  <div v-for="(p, i) in rooms" :key="i">
    <div class="black-bg" v-if="ModalOn[i] == true">
      <div class="white-bg">
        <h4>{{ p.title }}</h4>
        <p>{{ p.content }}</p>
        <button @click="ModalOn[i] = flase">창 닫기</button>
      </div>
    </div>
  </div>

  <div class="menu">
    <a v-for="(menu, i) in menus" :key="i">{{ menu }}</a>
  </div>
  <div v-for="(p, i) in rooms" :key="i">
    <img :src="p.image" class="room-img" />
    <h4>{{ p.title }}</h4>
    <p>{{ p.price }} 만원</p>
    <br /><br />
    <button @click="ModalOn[i] = true">상세페이지로</button>
  </div>
</template>

<script>
import roomList from './assets/roomData.js';

export default {
  name: 'App',
  data() {
    return {
      rooms: roomList,
      ModalOn: [false, false, false, false, false, false],
      menus: ['Home', 'Shop', 'About'],
    };
  },
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}

.room-img {
  width: 50vw;
  margin-top: 10vh;
}

body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

.black-bg {
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  padding: 20px;
  margin: 0 25%;
}

.white-bg {
  width: 100%;
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin: 0 auto;
}
</style>

이런식으로 간단하게 데이터를 import 해서 갖다 쓸 수가 있게 된다.