---
# System prepended metadata

title: 6. 리스트 아이템 컴포넌트 공통화
tags: [Vue.js 완벽 가이드, 지호]

---

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

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

---

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

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

src/views/NewsView.vue

![image](https://user-images.githubusercontent.com/24283401/163090175-40ec15cd-6e56-45a8-b465-2f9fdb11bbe2.png)

src/components/ListItem.vue

![image](https://user-images.githubusercontent.com/24283401/163090206-81beff23-0e03-4727-973f-16b50978f8cc.png)


<br/>

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

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

![image](https://user-images.githubusercontent.com/24283401/163134649-7feb6c5e-7a8d-42f7-beeb-4ad67ebe8783.png)

<br/>

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

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

![image](https://user-images.githubusercontent.com/24283401/163139193-c099320a-8a75-45e8-9f64-fe8c5689b946.png)


### v-if 디렉티브를 활용하여 분기 처리
![image](https://user-images.githubusercontent.com/24283401/163139234-722e50f0-c5fc-4277-9d21-efe682302bff.png)


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