Props 처리 단계

1. isFavorite 속성 추가

   props: [
       'userName',
       'userPhone',
       'userEmail',
       'isFavorite'
   ],

2. 변수 선언

   favoriteStatus: this.isFavorite

3. 값 변경 로직 구현

   // Props는 직접 수정할 수 없으므로 별도의 변수 사용
   // toggleFavorite 메서드에서 변수 값 변경
   toggleFavorite() {
       this.favoriteStatus = this.favoriteStatus === '1' ? '0' : '1';
   }

4. 템플릿에서 변수 사용

   <h2>{{userName}}{{ favoriteStatus === '1' ? '-(즐겨찾기)' : '' }}</h2>
   <button @click="toggleFavorite">즐겨찾기 전환</button>

5. 부모 컴포넌트에서 props 전달

전체 코드 예시

UserCard.vue

<template>
    <li>
        <h2>{{userName}}{{ favoriteStatus === '1' ? '-(즐겨찾기)' : '' }}</h2>
        <button @click="toggleFavorite">즐겨찾기 전환</button>
        <button @click="toggleDetails">{{ detailsVisible ? '숨기기' : '보기' }} 상세정보</button>
        <ul v-if="detailsVisible">
            <li><strong>전화번호:</strong>{{ userPhone }}</li>
            <li><strong>이메일:</strong>{{ userEmail }}</li>
        </ul>
    </li>
</template>

<script>
export default {
    props: [
        'userName',
        'userPhone',
        'userEmail',
        'isFavorite'
    ],
    data() {
        return {
            detailsVisible: false,
            userInfo: {
                name: "홍길동",
                phone: "123-456-7890",
                email: "gildong@example.com",
            }, 
            favoriteStatus: this.isFavorite
        };
    },
    methods:{
        toggleDetails() {
            this.detailsVisible = !this.detailsVisible;
        },
        // Props는 직접 수정할 수 없으므로 별도의 변수 사용
        toggleFavorite() {
            this.favoriteStatus = this.favoriteStatus === '1' ? '0' : '1';
        }
    }
};
</script>

MainApp.vue

<template>
    <section>
        <header><h1>내 친구 목록</h1></header>
        
        <ul>
            
            
        </ul>
    </section>
</template>

<script>
export default {
    data() {
        return {
            userList: [
                { id: 1, name: '홍길동', phone: '1234567890', email: 'gildong@example.com' },
                { id: 2, name: '김철수', phone: '0987654321', email: 'cheolsu@example.com' },
                { id: 3, name: '이영희', phone: '1245678901', email: 'younghee@example.com' },
                { id: 4, name: '박민준', phone: '0123456789', email: 'minjun@example.com' },
                { id: 5, name: '최지우', phone: '1029384756', email: 'jiwoo@example.com' },
                { id: 6, name: '정서아', phone: '1234567890', email: 'seoah@example.com' }
            ]
        }
    }
}
</script>

<style>
* {
  box-sizing: border-box;
}
html {
  font-family: "Noto Sans KR", sans-serif;
}
body {
  margin: 0;
}
header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #2c3e50;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #3498db;
  color: #2c3e50;
  margin: 0 0 1rem 0;
}
#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #3498db;
  background-color: #3498db;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
#app button:hover,
#app button:active {
  background-color: #2980b9;
  border-color: #2980b9;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}
</style>