[Vue.js] 버튼 만들고, 버튼 누르면 텍스트 나타내기.

 

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

버튼을 만들고
그 버튼을 누르면
텍스트가 나오도록
만들 것이다.

 

 

 

 

 

1. 실행 화면

 

 

 

 

---

 

 

 

 

2. HelloView.vue 

MainView.vue에 있는 Hello,Vue!! 텍스트 출력 부분 코드를 HelloView.vue로 옮겨준다. 만약 새롭게 화면을 만든다면 메인화면 창 하나와 텍스트를 설정한 창 하나를 만들면 된다. 

<script>
export default {
  name: 'HelloVue',
  props: {
    showHello: {
      type: Boolean,
      required: true,
    }
  }
}
</script>



<template>

  <div class="hello-vue">
    <h1> HelloVue!! </h1>
  </div>

</template>



<style scoped>

.hello-vue {
  position: fixed;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  background: white;
  color: olivedrab;
  font-family: "Cafe24Meongi-B-v1.0";
}

</style>

 

나머지는 거의 똑같은데, 텍스트 위치만 left: 80%로 옮겨줬고 <script>코드가 추가됐다. <script> 코드만 살펴보겠다.

export default {
  name: 'HelloVue',
  props: {
    showHello: {
      type: Boolean,
      required: true,
    }
  }
}

export는 외부로 내보낼때 쓴다. import는 받아올때 쓰는 것으로 export와 반대되는 개념이다. default는 개체가 하나만 있는 경우 붙인다. 현재 코드에서는 객체 전체를 HelloVue라고 등록하여 내보내니까 default를 붙였다.

props는 부모 컴포넌트가 자식에게 데이터를 전달하는 수단이다. 이 코드에서는 <script setpu>으로 설정하지 않고 그냥 <script>로 설정했다. 그래서 props 옵션을 사용하여 props를 선언한다.

showHello는 전달받는 prop의 이름이다. 이 코드에서 Hello,vue라는 텍스트가 버튼을 누르면 보이고 누르기 전에는 안 보이게 하기 때문에 type을 Boolean으로 설정하여 showHello는 true와 false 값만 받도록 했다. (true 값이 오면 보이도록 하고, false 값이 오면 안 보이도록 할 거니까)  required를 true로 설정하여 부모 vue가 반드시 showHello의 prop을 받아야 정상 작동하도록 설정했다.

그래서 MainView에 가서 prop을 받은 코드를 없앴다. 그런데 동작에 문제가 없었다!! 공식문서를 찾아보니 Boolean은 예외적으로 다르게 동작한다고 한다. Boolean 타입을 제외한 타입은 prop을 받아야 동작한다. 

 

 

Vue.js (출처: https://ko.vuejs.org/guide/components/props)

· 모든 prop은 기본적으로 선택 사항이며, required: true가 지정된 경우에만 필수입니다.
· Boolean이 아닌 선택적 prop이 없으면 값은 undefined가 됩니다.
· Boolean prop이 없으면 false로 변환됩니다. 이를 변경하려면 default를 설정할 수 있습니다.
  예: default: undefined로 설정하면 Boolean이 아닌 prop처럼 동작합니다.
· default 값이 지정된 경우, prop 값이 undefined로 해석되면(즉, prop이 없거나 명시적으로 undefined가 전달된 경우) 해당 값이
  사용됩니다.

 

 

 

 

---

 

 

 

 

3. MainView.vue에 버튼 만들기

<template>
  <div class="main-view">
    <button class="btn" @click="btnHello" style="cursor: pointer"> Click </button>
  </div>
</template>

main-view 안에 버튼을 만든다. <button>으로 쉽게 버튼을 만들 수 있다. @click은 클릭시 어떤 동작을 일어나도록 만들거라, 그 동작이 일어날 이름을 btnHello라고 정의했다. cursor: pointer은 버튼에 커서를 대면 클릭하는 모양으로 바뀌도록 스타일을 지정했다.

 

.btn {
  position: absolute;
  width: 80px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: white;
  background-color: black;
}

position: absolute는 가장 가까운 부모 요소를 찾아서 그 요소의 위치를 기준으로 위치를 잡는다. main-view의 position은 relative고, width: 100vw와 height:100vh를 줬다. 주로 부모-자식 요소를 배치할 때, 부모는 relative로 잡고 그 부모를 중심으로 위치를 잡는 자식 요소를 absolute를 준다. 물론 꼭 부모 요소가 relative일 필요는 없다. 다만 relative가 레이아웃 흐름의 영향을 딱히 받지 않으면서 기준만 생기기 때문에 직관적이라서 그렇게 배치를 한다고 한다.

width와 height로 버튼의 크기를 정하고, top과 left, transform으로 버튼이 정중앙에 오도록 배치했다. 

 

 

 

 

---

 

 

 

 

4. 버튼을 누르면 텍스트 나타내기

• import 하기

<script>

import HelloVue from "@/components/HelloVue.vue";

export default {
  name: "MainView",
  components: {HelloView},
}

</script>

 

 

 

아까 HelloView에서 export 했었는데, 그걸 MainView에서 import로 받아보겠다. from에 경로를 적어준다. 위 사진을 보면 components 디렉터리 하위에 HelloVue.vue가 있다. 그래서 "@/components/HelloVue.vue"이렇게 경로를 설정했다. components는 가져온 컴포넌트를 현재 컴포넌트에 등록하는 것이다.

 

 

 

• template HelloView 설정하기

<template>
  <div class="main-view">
    <button class="btn" @click="btnHello" style="cursor: pointer"> Click </button>
    <HelloView v-if="showHello" :show-hello="showHello"/>
  </div>
</template>

v-if는 블록을 조건부로 렌더링 하는 데 사용한다. 공식문서에 따르면 디렉티브의 표현식이 참 값을 반환할 때만 블록이 렌더링 된다고 적혀있다. 이 사실을 잘 기억하고 있자.

:show-hello:"showHello"는 HelloView에서 Props에 넣었던 것이다. props는 부모 컴포넌트가 자식에게 데이터를 전달하는 수단이라고 설명했었다. 버튼을 누르면 true 값이 자식 HelloView에 전달되는데, 사실 이 코드에서 꼭 필요한 존재는 아닌 것 같다.  현재 코드는 간단하게 true인지 false인지로 동작이 행할지 말지 결정이 된다. 값을 자식에게 보내주고, 그 값을 통해 자식 내부에 어떤 변화가 일어나지 않으니 굳이 안 써도 되는 부분이긴 하나 후에 사용할 수도 있으니 놔두기로 결정했다.

 

 

 

• script에 동작 관련 코드 추가하기

export default {
  name: "MainView",
  components: {HelloView},
  data() {
    return {
      showHello: false,
    };
  },
  methods: {
    btnHello() {
      this.showHello = true;
    }
  },
}

</script>

data( )는 상태를 정의한다. showHello의 상태는 false로 MainView 화면에 나타나지 않도록 했다.  methods는 버튼을 클릭했을 때 실행할 함수를 정의한다. this.showHello로 false로 표시된 showHello가 true로 바뀌도록 만들었다. 여기서 this.는 Vue의 인스턴스를 가리키며 data( )에 정의한 변수를 의미한다.

 

 

 

---

 

 

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

 

🪽

틀린 내용이 있다면 댓글로 알려주세요

 

 

---

 

 

- 컴포넌트 기초

Vue.js

 

 

 

- props

Vue.js

 

 

 

- v-if

Vue.js