컴포넌트
•
UI를 재사용할 수 있게 캡슐화가 가능하고 필요한 곳에서 사용할 수 있음.
•
클린 코드가 가능하다.
폴더 구조 생성
src 내부에 components 폴더를 만든다.
재사용이 가능한 컴포넌트들을 파일로 만들어서 쓰기 위함이다.
nav태그를 위한 파일과 카드를 위한 파일을 하나씩 만든다.
기본 vue3 코드 구조도 세팅하자.
TheNav.vue
코드 복사하기
전체 nav 태그를 TheNav.vue 컴포넌트 파일 template 태그 내부에 붙여넣는다.
TheView.vue
코드 복사하기
main 태그 전체를 TheView.vue 파일 template 섹션안에 붙여넣는다.
컴포넌트 등록
지역등록
•
TheNav.vue 컴포넌트
1. import로 파일을 불러온다.
2. components에 등록한다.
3. template에서 사용한다.
•
확인
navbar 정상 작동
•
TheView.vue 컴포넌트
TheView.vue 컴포넌트도 정상작동 (근데 왜 여백이 안 떨어지지?)
전역등록
→ main.js 에서
→ import로 해당 컴포넌트 정의
→ app.components(변수, 컴포넌트 명) 으로 전역으로 등록
→ 원하는 곳에서 <AppCard><AppCard/> 로 사용
•
사용
TheView.vue 에 <AppCard>그래도 사용하면 된다.
잘 적용이 된다.
❗️전역 등록시 주의할 점
1.
빌드 시스템 사용시 컴포넌트 사용하지 않더라도 최종 빌드에 항상 포함이 되어 빌드 된다.
2.
main.js에 전역 컴포넌트를 전부 등록하면 종속 관계를 파악하기 어려워서 관리가 더 어렵고 가독성이 떨어진다.
3.
사용할 때 마다 인스턴스가 생성되고, 생명주기에 따라 셋업함수가 실행이 된다는 걸 기억하자.