import / export default

어떤 js파일에서 만든 변수나 자료를 다른 js파일에서 사용하고 싶은 경우 export, import 문법을 쓴다.
다른 js 파일에서 export를 해야 다른 js 파일에서 import해서 가져올 수 있다.

export

예를들어 아래와 같은 데이터가 있다고 가정해보자.

[{
  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
  },
 }];

위에 있는 코드를 다른 js파일에서 쓰고싶으면

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

저렇게 export default 키워드를 사용해 적어주면 된다.

import

그리고 가져오는 방법은 import를 쓰면 되는데
아까 내보낸 데이터를 가져오는 방법은

import (아무이름) from '내보낸 파일경로';

를 적어주면 된다. 그리고 저 데이터를 쓰고싶으면 데이터바인딩을 통해서 자료를 집어 넣을 수 있다.
위에 데이터의 경우 배열안에 오브젝트가 있기 때문에

<p> {{data[0].title}} </p>
<p> {{data[0].price}} </p>

<p> {{data[1].title}} </p>
<p> {{data[1].price}} </p>

이런식으로 넣을 수 있다.

아래는 응용 코드다.

<div v-for="(item, i) in oneRoomData" :key="i" @click="modal = true; clickData = i">
   <h2>{{item.title}}</h2>
     <div class="box">
      <img :src="item.image">
        <div class="text" >
          <p>{{item.content}}</p>
          <h3>{{item.price}}원</h3>
       </div>
  </div>
</div>

</template>

<script>
import data from './oneroom.js'

export default {
  name: 'App',
  components: {
 },
  data() {
    return {
      oneRoomData: data,
      modal: false,
    }
  },
  methods: {
  }
}
</script>

import, export에 대한 더 자세한 설명은 아래 다른 글에서 볼 수 있다.

https://velog.io/@yubiny289/JS-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%EB%B0%8F-ES6

모달창 내에 상세페이지 만들기

아래는 저번 글에서 만들었던 모달창이다.

<div class="black-bg" v-if="modal == true">
  <div class="white-bg">
    <h4>상세페이지</h4>
    <p>상세페이지내용</p>
  </div>
</div>

만약 여기서 각 oneRoomData 마다 다른 상세페이지를 보여주고 싶으면,

<div class="black-bg" v-if="모달창열렸니 == true">
  <div class="white-bg">
    <h4>{{ oneRoomData[0].title }}</h4>
    <p>상세페이지내용임</p>
  </div>
</div>


<div class="black-bg" v-if="모달창열렸니 == true">
  <div class="white-bg">
    <h4>{{ oneRoomData[1].title }}</h4>
    <p>상세페이지내용임</p>
  </div>
</div>

이런식으로 적을 수 있다. 하지만 이런 방법은 코드가 매우 길어진다. 이럴때는 사용자가 누른 oneRoomData를 넣어주면 코드들 줄일 수 있다. 즉, 1번 상품을 누르면 변수 1을 넣어주고, 2번 상품을 누르면 변수 2를 넣어주면 된다. 그럴려면 일단 사용자가 누른 데이터를 저장 해놔야한다.

data(){
  return {
    clickData: 0
  }
}

데이터를 저장해놨으면 이제 상품정보를 누르면 clickData를 상품 번호의 데이터로 변수를 바꿔주면 된다.

<div class="black-bg" v-if="모달창열렸니 == true">
  <div class="white-bg">
    <h4>{{ oneRoomData[clickData].title }}</h4>
    <p>상세페이지내용임</p>
  </div>
</div>

<div v-for="(item, i) in oneRoomData" :key="i" @click="modal = true; clickData = i">
   <h2>{{item.title}}</h2>
     <div class="box">
      <img :src="item.image">
        <div class="text" >
          <p>{{item.content}}</p>
          <h3>{{item.price}}원</h3>
       </div>
  </div>
</div>

즉, 정리하자면
1. 상품을 누르면 누른 data가 누른 상품 번호로 바뀜
2. 모달창안에 {{oneRoomData[data].title}} 이 실시간 재랜더링이 됨
3. 모달창 제목이 {{oneRoomData[data].title}} 로 나옴

v-else, v-else-if

저번 글에서는 조건이 참일 경우 특정 HTML을 보여주는v-if를 알아봤다. 그럼 당연히 else문과, v-else-if문도 있는데, 사용법은 아래와 같다.

// v-else
<div v-if="1 == 2">
  안녕
</div>
<div v-else>
  안녕하세요 // 조건이 참이 아닐경우 출력
</div>

// v-else-if
<div v-if="1 == 2">
  안녕
</div>
<div v-else-if="1 == 3">
  안녕하세요
</div>
<div v-else-if="1 == 4">
  안녕하십니까
</div>