v-if 와 모달창 만들기

상품을 누르면 뜨는 상세페이지를 만들어볼 건데  

실제 페이지를 다르게 이동시키는건 아니고 모달창 스타일로 만들어봅시다.

 

▲ 모달창이 뭐냐면 그냥 배경까맣고 안에 하얀 창있는 UI를 뜻합니다. 

상품명을 클릭하면 이걸 띄워볼겁니다. 

 

 

하지만 모달창만 배웠다고 모달창만 만들 수 있는 사람이 되면 안되기 때문에 

Vue로 동적인 UI 만드는 Step을 설명해드리겠습니다. 

1. 현재 HTML UI의 상태를 데이터로 저장해둠 (지금 보이는지 안보이는지 이런거) 

2. 그 상태에 따라 HTML UI을 보여줄지 말지를 Vue문법으로 작성함 

이것만 기억해두시면 모달창 말고도 탭, 서브메뉴 등 누르면 동작하는 UI들은 구글 도움 없이도 알아서 만들 수 있게됩니다. 

말이 추상적이라 뭔지 아직 모르겠으면 모달창이나 따라 만들어봅시다. 그럼 이해됩니다. 

 

 

 

 

 

그 전에 잠깐 이미지 넣는 법

 

이미지를 src 폴더 안에 아무데나 넣으시고

<img src="./경로"> 

를 적으시면 이미지 나옵니다. 끝

 

public 폴더에 넣으실 거면 약간 다른데 /경로라고 적으면 됩니다.

(public 폴더에 넣으면 나중에 발행할 때 이미지가 이름이 변하지않습니다 src는 임의로 바꿔줌)

배운 기념으로 하단에 첨부된 원룸들 이미지를 집어넣어보십시오.

이미지 크니까 이미지에다가 width와 margin-top 이런 걸로 스타일링좀 해보시고요. 

 

 

 

 

모달창 만들기

 

뭔가 버튼누르면 모달창을 띄워보고 싶으면

모달창부터 HTML CSS로 만드시길 바랍니다.

뭔가 갑자기 등장하는 UI들은 다 미리 만들어놓고 원할 때 띄워주는 방식이니까요. 

 

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

body {
  margin : 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%; height:100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg {
  width: 100%; background: white;
  border-radius: 8px;
  padding: 20px;
} 

 

 

이렇게 HTML과 CSS를 어딘가에 짜놓으시길 바랍니다.

이번 HTML 코드는 좀 위에 적는게 좋습니다. 

 

 

 

근데 기능개발 어떻게 할겁니까. 상품제목을 누르면 모달창이 뿅하고 떠야합니다. 

그냥 Vue로 동적인 UI 만드는 Step을 설명해드리겠습니다. 

1. 현재 HTML UI의 상태를 데이터로 저장해둠 (지금 보이는지 안보이는지 이런거) 

2. 그 상태에 따라 HTML UI를 보여줄지 말지를 Vue문법으로 작성함 

이것만 기억해두시면 모든 UI기능은 거의 다 혼자 만들 수 있을걸요 

 

 

 

그래서

1. 현재 모달창의 상태를 데이터로 저장해둡니다.

모달창은 보이는/안보이는 상태만 존재합니다. 그래서 이걸 데이터로 표현해서 저장해두라는 소리입니다.

 

data(){
  return {
    모달창열렸니 : true,
  }
}

저는 이렇게 true/false로 나타내고 싶어서 저렇게 써놨습니다.

0또는 1 이렇게 표현해도 전혀 상관없습니다 님들 맘임 

미리 채워놓는 값은 기본값이라고 생각해도 되겠습니다. 

1번기능 개발 끝

 

 

 

2. 데이터 상태에 따라 HTML UI을 보여줄지 말지를 Vue문법으로 작성함 

false면 숨기고 true면 아까 만든 <div>를 보여주자는 겁니다.

그러려면 하나의 새로운 문법이 필요합니다. 

HTML 태그 안에 v-if="조건식"을 사용하면 조건식이 참일 때만 HTML을 보여줍니다.

간단한 Vue 문법인데 이거 쓰면 2번을 구현가능합니다.

 

<div class="black-bg" v-if="모달창열렸니 == true">
  <div class="white-bg">
    <h4>상세페이지</h4>
    <p>상세페이지내용임</p>
  </div>
</div>

그래서 이렇게 쓰면 모달창열렸니라는 데이터가 true일 때만

<div>를 보여주는겁니다. 

2번 개발 끝입니다. 

 

 

그럼 모달창 셋팅이 완료된겁니다.

이제 여러분은 모달창열렸니 라는 데이터를 조작하면 모달창을 켜고 끌 수 있습니다.

UI만들 땐 일종의 스위치같은걸 미리 만들어둔다고 생각하면 됩니다.

스위치만드는 법은 저렇게 1번 2번 따라주면 되고

스위치를 켜고 끄는건 '모달창열렸니'라는 데이터를 조작하면 끝 아니겠습니까.

 

 

Q. 그럼 상품제목을 눌렀을 때 모달창을 열려면 코드 어떻게짜죠?

그니까 '모달창열렸니' 스위치를 켜려면 어떻게 코드짭니까.

전 강의에서 배운건 알아서 해보시길 바랍니다. 

 

 

 

오늘의 상식 :

data(){} 이 부분을 리액트 이런 곳에선 state라고 부릅니다. 

뭔가 정보 저장하는 곳이기도 하고

UI의 현재 상태를 저장하는 곳이기도 하니까요.

상태는 영어로 state입니다.