props 관련 질문입니다.

App.vue

<template>
  <div>
     

    <!-- 모달 컴포넌트에 원룸들, 누른거, 모달창열렸니, closemodal 메소드를 넣어줌 -->
    <modal :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" :closemodal="closemodal"/>

    <div class="menu">
      <a v-for="(name, i) in menus" :key="i">{{ name }}</a>
    </div>

    <discount />

    <div v-for="(data, i) in 원룸들" :key="i">
      
      <h4 @click="모달창열렸니 = true; 누른거 = i"> {{ data.title }} </h4>
      <p>{{ data.price }}원</p>
      <button @click="신고수[i]++">허위매물신고</button>
      <span>신고수 : {{ 신고수[i] }}</span> <br><br>
    </div>
  </div>
</template>

<script>
import discount from './components/Discount.vue';
import data from './oneroom.js';
import modal from './components/Modal.vue'
export default {
  name: 'App',
  data() { // 앵간하면 데이터들은 밑으로 보낼 땐 props만 쓰면 되는데 위로 올리는건 불편하니까 그냥 최상위 컴포넌트에 데이터 다 집어넣자.
    return {
      menus: ['Home', 'Shop', 'About'],
      신고수: [0, 0, 0, 0, 0, 0],
      모달창열렸니: false,
      원룸들: data,
      누른거: 0,
    }
  },
  methods: {
    closemodal() {
      this.모달창열렸니 = false
    },

    handleEscKey(event) {
      if (event.key === "Escape") {
        this.closemodal(); // ESC 키가 눌리면 모달 닫기
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleEscKey);
  },
  unmounted() {
    window.removeEventListener('keydown', this.handleEscKey);
  },
  components: {
    discount: discount,
    modal : modal,
  }
}

</script>

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

body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

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

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

.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;
}

.room-img {
  width: 100%;
  height: 100%;
}

.Discount {
  background: #eee;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
</style>

Modal.vue

<template>
  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      
      <h4>{{ 원룸들[누른거].title }}</h4>
      <p>{{ 원룸들[누른거].content }}</p>
      <p>{{ 원룸들[누른거].price }}원</p>
      <button @click="closemodal">닫기</button> <!-- props는 read-only이기 때문에, 모달창열렸니 = false 마냥 등호를 지 멋대로 바꾸면 안되기에, closemodal 함수로 하여금 상태를 boolean으로 변경함.-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    원룸들: Array,
    누른거: Number,
    모달창열렸니: Boolean,
    closemodal: Boolean,
  }
}
</script>

<style>

</style>

로 했는데,     closemodal: Boolean <-- 얘를 function으로 저장하지 않음 안된다고 gpt가 그러는데

실제론 잘 동작합니다. 혹시나 코드가 동작이 안하는건가 싶어서 Boolean을 지워보면 닫기 버튼 실행이 안되구요. Function을 넣어야하는데 Boolean을 넣었음에도 동작하는 이유가 뭔지 알 수 있을까요?

이 이유가 Vue의 렌더링 시스템이 자동으로 값을 평가하기 때문이라는데, props로 전달된 데이터가 Function인데도 Boolean으로 정의했을 경우, Vue는 이를 무조건적으로 true로 평가합니다.
라고 하는데, 이 말이 이해가 안됩니다. false와 true값을 반대로 바꿔서 해봐도 정상 작동합니다.

props의 정확한 구동원리를 알고 싶고, 제가 짠 코드임에도 이게 맞나 헷갈립니다.

물론 지금처럼 props로 박는것보다 emit으로 만드는게 데이터 흐름이 단방향이라 구조가 명확하고, 자식 컴포넌트는 데이터 변경 방법을 모르고 신호만 보내니 독립적으로 재사용 가능해서 더 용이한 것은 알고 있으나 단순한 궁금증이 생겨 여쭤봅니다.

• 이 게시글은 뷰발뉴비에 의해 7 월, 3 주 전에 수정됐습니다.