반응형
오늘의 목표
앞서 복잡한 App.vue 파일의 코드들을 여러개의 Component로 나누고 보다 가독성이 좋은 코드로 변경해보자.
#1. Component용 vue 파일 생성하기
#2. Component를 가져다 사용하기 (import, components에 추가, 해당 component 사용하기)
#1. Component용 vue 파일 생성하기
- 아래의 기존 소스에서 title 부분을 별도의 vue 파일을 생성하고 옮겨보자.
- components 폴더에 title.vue 파일 생성 후 위 코드를 옮기자.
여기서 주의해야 할 것은, 하나의 component는 하나의 태그로 구성돼야 하고, 반드시 template으로 감싸줘야 한다.
#2. Component를 가져다 사용하기 (import, components에 추가, 해당 component 사용하기)
- 위처럼 component로 나누어 사용하면 되는데, 보통 component를 재사용하는 경우가 많이 있다.
(예를들어, 상품의 가격표를 출력하고 싶은데 '3000원입니다.', '2500원입니다.', '5000원입니다.'
3개의 가격표 모두 'xxxx원입니다.'의 형태로 되어 있기 때문에 해당 부분을 component로 뺄 수 있고
component를 호출할 때 3000, 2500, 5000의 값을 넘겨주어 해당 숫자를 넣은 값으로 출력되면 좋지 않을까?)
- 그래서 component를 호출할 때 파라미터를 넘기고 해당 값을 받아서 처리하는 로직을 추가해보자.
- 이제 title.vue에서 아래와 같이 처리해주자.
- title 뿐 아니라 footer, menu 부분도 component로 분리하여 App.vue의 코드를 보다 간결하게 만들었다.
- 실행화면은 component를 나누기 전과 동일하다.
※ 해당 내용은 아래의 사이트에서 강의를 보며 실습한 내용입니다.
memi.dev
개발에 대한 모든 것을 다룹니다
memi.dev
반응형
댓글