vue의 컴포넌트에 대해서 알아보자.
React에서 지긋지긋할 정도로 만들어봤던 컴포넌트들이다.
vue에서 언제 이걸 배우나 학수고대 하고 있었다.
간단히 컴포넌트를 만들기 위한 실습 예제를 만들어봤다.
위에서 Show Details 버튼을 누르게 되면 해당 사람에 대한 Details에 대한 정보가 나온다. 지금은 컴포넌트를 따로 만들지 않고 하나의 app.js에서 모든것을 처리했다. 그렇게 되면 버튼을 눌렀을 때 어떤일이 발생할까?
버튼을 누르게되면 모든 목록이 펼쳐진다.
내가 원하는 것은 해당 인원에 대한 Details만 펼쳐지는 것이었는데, 하나의 app.js에서 만들었기 때문에 이런 현상이 발생했다.
물론 기존 지식에 의해서 각각의 배열에 id를 부여하고 따로 펼쳐지게 할 수 있지만, 이번 강의는 컴포넌트이기 때문에 컴포넌트를 사용해서 해결해보았다.
component를 생성하는 방법
기본적인 틀은 app.component('이름', {내용}) 이다.
여기서 '이름'은 html과 충돌이 일어나지 않도록 만들어야한다.
React에서 component 이름을 대문자로 시작하거나 camelCase로 설정했던 것과 같다.
app.component("contact-friend", {
template: `
<li v-for="friend in friends" :key="friend.id">
<h2>{{ friend.Name }}</h2>
<button @click="toggleDetails">
{{visibleDetails ? 'Hide' : 'Show'}}
Details</button>
<ul v-if="visibleDetails">
<li><strong>Phone : </strong>{{friend.Phone}}</li>
<li><strong>Email : </strong>{{friend.Email}}</li>
</ul>
</li>
`,
data() {
return {
visibleDetails: false,
friends: [
{
id: "julie",
Name: "Julie Jones",
Phone: "010 1111 2222",
Email: "julie@localhost.com",
},
],
};
},
methods: {
toggleDetails() {
this.visibleDetails = !this.visibleDetails;
},
},
});app.mount 이전에 다음과 같은 컴포넌트를 추가하고 html에 컴포넌트 명을 태그로 사용한다.
contact-friend를 태그로 사용할 수 있게 되었다.
버튼을 눌러보면, 아까와는 다르게 하나만 펼쳐지는 것을 볼 수 있다.
간단하게 component에 대해서 배우는 강의라 허점이 많다.
- 컴포넌트로 만든다 한들, 친구 데이터를 여러개 넣으면 한번에 펼쳐지고 한번에 접히는 것은 동일하다.
이 문제는 결국엔 친구 하나하나 마다 컴포넌트화를 시켜야 한다는 것인데, 처음에 언급했던바와 같이 id설정으로 더 편하게 할 수 있을 것 같다.
- template를 사용해서 사실상 하드코딩을 했기 때문에 컴포넌트를 만들었지만 더 복잡해져버렸다.
이는 추후의 강의에서 다른 방식으로 해결해나간다고 하니 더 들어봐야겠다.
정리
- Component를 만들어서 부모-자식 관계로 설정하여 관리할 수 있다.
- 사용법은 React의 Component와 매우 유사하다. html과 충돌이 없는 선에서 이름을 지어주고 html태그처럼 사용할 수 있다.
- Component 각각 마다 따로 실행되기 때문에 구역을 나누는데 유리하다.
👏 Github
