# 6. 리스트 아이템 컴포넌트 공통화

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

---

## 1. 컴포넌트 공통화 리팩토링

- NewsView, JobsView, AskView에서 반복되는 코드들을 ListItem으로 컴포넌트화
- 페이지 컴포넌트들의 비즈니스 로직은 하위 컴포넌트로 이동시킴

src/views/NewsView.vue


src/components/ListItem.vue


<br/>

## 2. 페이지별 데이터 분기

하위 컴포넌트의 비즈니스 로직들을 페이지별로 분기처리시킨다.


<br/>

## 3. template 속성과 v-if 디렉티브 활용

### 템플릿을 이용하여 분기 처리


### v-if 디렉티브를 활용하여 분기 처리

참고: https://kr.vuejs.org/v2/guide/syntax.html