---
# System prepended metadata

title: 7. 사용자 프로필 컴포넌트화
tags: [Vue.js 완벽 가이드, 지호]

---

# 7. 사용자 프로필 컴포넌트화

###### tags: `지호`, `Vue.js 완벽 가이드`

---

## 1. 컴포넌트 데이터 흐름 처리 

### 방법 1. 하위 컴포넌트에서 computed를 통해 state에 접근

src/views/UserView.vue

![image](https://user-images.githubusercontent.com/24283401/163142480-3a8e8fc1-4960-4aaa-a837-8fd4004b81bb.png)

src/components/UserProfile.vue

![image](https://user-images.githubusercontent.com/24283401/163142540-8ea656d4-b2c4-4acb-b9b8-1bd8bc04e9c6.png)

<br/>

### 방법 2. 상위 컴포넌트에서 하위 컴포넌트에게 props로 데이터를 넘겨준다.

src/views/UserView.vue

![image](https://user-images.githubusercontent.com/24283401/163143149-f62b752c-34c3-4349-ae5e-c4416b5ed76e.png)

src/components/UserProfile.vue

![image](https://user-images.githubusercontent.com/24283401/163143078-0cd1fe41-296f-4acf-aeb0-714b6683b12d.png)


<br/>


## 2. slot을 이용한 사용자 프로필 컴포넌트 구현

### slot

- 컴포넌트의 재사용성을 높여주는 기능
- 특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확장하거나 재정의
- 상위 컴포넌트에서 slot의 내용을 정의해주지 않으면 빈 공간으로 남아있음



참고 
https://joshua1988.github.io/web-development/vuejs/slots/
https://kr.vuejs.org/v2/guide/components-slots.html

- div와 다르게 template은 실제로는 태그없이 텍스트만 들어감
- 다른 상위 컴포넌트에서 같은 UserProfile을 재사용


src/components/UserProfile.vue

![image](https://user-images.githubusercontent.com/24283401/163281322-b82e118b-a0a9-4678-a5b2-20e8a8593c28.png)

src/view/UserView.vue

![image](https://user-images.githubusercontent.com/24283401/163281345-8d2987bc-10cd-43ad-ae65-59034b50e96f.png)

src/view/ItemView.vue

![image](https://user-images.githubusercontent.com/24283401/163281360-a9e8f8d5-5156-4337-a2a1-a9b2608781b1.png)




