문제점

index.html

<section id="app">
	<ul v-for="friend in friends" :key="friend.id">
		<li>
			<h2>{{friend.name}}</h2>
			<button @click="toggleDetails">{{seeDetail ? 'Hide' : 'Show'}}Details</button>
			<ul v-if="seeDetail()">
				<li><strong>Phone:</strong>{{friend.phone}}</li>
				<li><strong>Email:</strong>{{friend.email}}</li>
			</ul>
		</li>
	</ul>
</section>

• v-if 디렉션이 있는 곳을 보면 seeDetail 메서드가 존재하는데

app.js

data(){
  return{
    seeDetail:false,
    friends:[
      {id:"정우", name:"KJW", phone:"010-1111-1111", email:"google@localhost.com"},
      {id:"엘리스", name:"OYZ", phone:"010-2222-2222", email:"elice@localhost.com"},
    ]
  }
},
  methods:{
    toggleDetails(){
      return this.seeDetail = !this.seeDetail
    }
  }

• 데이터와 메서드가 위와같다고 생각할 때 toggleDetails의 메서드에 id값을 구분해주는 로직이 없다보니 어떠한 버튼을 눌러도 모든 데이터가 동시에 활성화되고 동시에 비활성화되는 문제가 발생한다.

• 물론 방법은 여러가지가 있다. data prop에 seeDetail 속성을 A,B,C... 처럼 나누든지, => dynamic하지 못 한 코드
  friedns에 seeDetail 속성을 하나씩 추가하든지 => DB를 손대긴 싫음
  이러한 경우엔 어떻게 해결해야할까? => 컴포넌트를 이용하면 쉽게 해결할 수 있다.

컴포넌트

• React에 나온 컴포넌트와 비슷한 개념이다.

사용법

app.js

const app = Vue.createApp({...})

app.component(식별자, Vue구성객체);

app.mount("css selector")

index.html

<section id="css selector">
	<식별자></식별자>
</section>

• 이때 당연하게도 mount된 vue app 밖에 선언된다면 브라우저는 이를 그냥 무시할 것이다.

식별자

• 식별자(해당 컴포넌트 id) : 컴포넌트는 기본적으로 커스텀 HTML 요소이기 때문이다. 커스텀 HTML 태그를 정의해 줘야 하는데 예를 들면 user-contact나 friend-contact와 같이 정의해 볼 수 있다.
  • 이처럼 항상 대시 기호(-)를 포함한 식별자를 사용해야하는데 그 이유는 공식 내장 HTML 요소와 충돌되는 일을 막기 위하기 때문이다.

구성객체

• Vue구성 객체 : createApp({...}) 의 ... 과 같은 구성객체를 전달해주어야한다.
  • component는 본질적으로 Vue 앱과 같다 다른 앱에 속한 앱일 뿐이다.
  • 즉, 이것이 메인 앱에 연결될 앱이고 말하자면 컴포넌트는 미니 앱인 셈이다.
  • 추가적으로 앞서 언급했듯 이것은 또하나의 앱이기 때문에 설명 main 앱과 이름이 겹쳐도 컴포넌트가 캡슐화되어 있으므로 충돌이 발생하지 않는다.
• 추가로 앞서 배운 template 속성값을 이용하여 html 태그들을 작성해주어야한다.

캡슐화

• 만약 이를 여러번 쓰면 각각 같은 컴포넌트들이 재사용 될 것이고 그렇게 되면 각각은 독립적인 vue app으로 HTML 코드를 쉽게 복제하고 캡슐화할 수 있는 것이다.

• 하지만 또 필요에 따라서 정보를 공유하기 위해 서로 통신도 할 수 있으니 1석 2조라고 할 수 있겠다.