[Vue/코딩애플/part1] 4. Vue 에서 모달창 만들기

📌이미지 넣는 법

이미지를 src 폴더 아무데나 넣고

<img src="./경로">

 

src 폴더에 있는 것을 가져올 때는 경로를 ./ 로 시작하면 된다.

 

만약 이미지를 public 폴더에 넣을거면 /경로 로 해야한다.

public 폴더에 넣으면 나중에 발행할 때 이미지가 이름이 변하지 않는다.

src에 있는 이미지는 임의로 바꿔준다.

 

▼ public 관련 참고

https://onlynana.tistory.com/entry/Vue%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8Cpart2-7-build-Github-pages-%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#%20%E2%9A%A1%20build%20%ED%95%A0%20%EB%95%8C%20%EC%95%95%EC%B6%95%20%EC%8B%9C%ED%82%A4%EA%B3%A0%20%EC%8B%B6%EC%A7%80%20%EC%95%8A%EC%9D%80%20%ED%8C%8C%EC%9D%BC%EC%9D%B4%20%EC%9E%88%EB%8B%A4%EB%A9%B4%3F-1

[Vue/코딩애플/part2] 7. build / Github pages 로 배포하기

 

<파일 경로 기호>
/ : root
./ : 현재 위치
../ : 상위 경로

<src 관련 참고 사이트>
: src 에 변수 넣고 싶을 때 참고하기 (require 함수 이용해야 한다)
https://im-designloper.tistory.com/81

 

 

📌 모달창 만들기

1. 모달창  UI 만들기

모달창 영역을 HTML 영역 (템플릿) 안에 넣자. 맨 위에 넣어주었다.

 <!-- 모달창 영역 -->
  <div class="black-bg">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지내용임</p>
    </div>
  </div>
  <!-- // 모달창 영역 끝 -->

 

2. 모달창 상태를 초기화 하자 (false 로)

역삼동원룸 <- 제목을 누르면 모달창을 띄우려고 한다. 제목을 누르기 전에는 모달창이 노출되면 안되므로

isModal 이라는 변수를 만들어주고, 초기화를 false로 해주자

이제 isMadal 이란 변수가 true 면 모달창이 노출되고, false 면 닫힌다.

그러려면, 모달창 UI  부분에 v-if 를 활용하면 된다.

 

먼저 변수를 만들고 초기화 한 다음에

 data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      menu : ['Home', 'Shop', 'About'],
      count : [0,0,0],
      isModal : false
    }
  },

 

v-if 문을 이용하여 isModal 이 true 일 때만 노출되도록 코드를 작성한다.

<!-- 모달창 영역 -->
  <div class="black-bg" v-if="isModal === true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지내용임</p>
    </div>
  </div>
  <!-- // 모달창 영역 끝 -->

 

 

3. 제목을 눌렀을 때 모달창이 노출되게 하기

제목 영역을 클릭 했을 때 모달창을 띄우려면?

클릭이벤트를 이용하자! 

isModal 이란 변수를 false 로 초기화를 했으니 제목을 클릭했을 때 ismodal 변수를 true 로 만들어주면 끝이다.

 

<h4 @click="isModal = true">{{a}}</h4> // 여기가 제목 부분

<div v-for="(a,i) in products" :key="i">
    <img :src="require(`./assets/room${i}.jpg`)" alt="room_img" class="room-img">
    <h4 @click="isModal = true">{{a}}</h4>
    <p>10만원</p>
    <button @click="increase(i)">허위매물신고</button><br>
    <span>신고수 : {{count[i]}}</span>
  </div>

 

click 이벤트 실행 영역은 함수로 빼도 좋다.

 

<동적인 UI 만드는 방법>
1. UI 의 현재 상태를 데이터로 저장해둠 (위에 예시처럼 isModal = false)
2. 데이터에 따라 UI 가 어떻게 보일지 작성 (위의 예시처럼 제목을 클릭하면 true 가 되게 한다)

 

참고로,

아래와 같은 데이터 저장공간을 state 라고 부른다. 리액트에선 state라고 함

(정보를 저장하는 공간이기도 하고 UI의 현재 상태를 저장하는 곳이기도 하기 때문)

 // 데이터 저장 공간 (= state)
  data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      menu : ['Home', 'Shop', 'About'],
      count : [0,0,0],
      isModal : false
    }
  }

 

모달창 닫기 버튼 만들기

이제 모달창 영역에 [닫기] 버튼을 만들고, [닫기] 버튼을 눌렀을 때 닫히는 기능이 동작하도록 만들어보자.

그러려면 UI 를 먼저 만들어야 한다고 했다.

그냥 아래 위치에다가 닫기 버튼을 넣었다.

<!-- 모달창 영역 -->
  <div class="black-bg" v-if="isModal === true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지내용임</p>
      <button>닫기</button>
    </div>
  </div>
  <!-- // 모달창 영역 끝 -->

 

 

닫기 버튼을 눌렀을 때 모달창을 사라지게 하려면 isModal 변수를 false 로 만들어주면 된다.

<button @click="isModal=false">닫기</button>

 

이렇게 추가해주면 끝이겠다!

 <!-- 모달창 영역 -->
  <div class="black-bg" v-if="isModal === true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지내용임</p>
      <button @click="isModal=false">닫기</button>
    </div>
  </div>
  <!-- // 모달창 영역 끝 -->

 

여기까지 CSS 를 제외한 전체코드는 아래와 같다.

<template>
   <!-- 모달창 영역 -->
  <div class="black-bg" v-if="isModal === true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지내용임</p>
      <button @click="isModal=false">닫기</button>
    </div>
  </div>
  <!-- // 모달창 영역 끝 -->

  <!-- 상단 메뉴 -->
  <div class="menu">
    <a v-for="a in menu" :key="a">{{a}}</a> <!-- Home 3개 출력 -->
  </div>
  <!-- // 상단 메뉴 끝 -->

  <div v-for="(a,i) in products" :key="i">
    <img :src="require(`./assets/room${i}.jpg`)" alt="room_img" class="room-img">
    <h4 @click="isModal = true">{{a}}</h4>
    <p>10만원</p>
    <button @click="increase(i)">허위매물신고</button><br>
    <span>신고수 : {{count[i]}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  // 데이터 저장 공간 (= state)
  data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      menu : ['Home', 'Shop', 'About'],
      count : [0,0,0],
      isModal : false
    }
  },
  methods: {
    increase(i) {
      // 함수 내용 입력
      this.count[i]++;
    }
  },
  components: {

  }
}
</script>