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

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

---

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

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

src/views/UserView.vue


src/components/UserProfile.vue


<br/>

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

src/views/UserView.vue


src/components/UserProfile.vue


<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


src/view/UserView.vue


src/view/ItemView.vue