# 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