모듈
자바스크립트 코드를 재사용할 수 있도록 분리한 파일을 모듈이라고 한다.
컴포넌트
UI를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다.
컴포넌트를 사용하는 이유
컴포넌트를 사용하면 UI를 재사용할 수 있다.
프론트엔드 개발을 하다보면 반복적으로 사용하는 코드들이 있는데, 이런경우 컴포넌트로 캡슐화 하여 필요한 곳에서 사용할 수 있다.
컴포넌트를 사용하여 UI를 독립적으로 나눔으로써 코드를 클린하게 할 수 있다.
프론트엔드 개발을 하다보면 코드가 길어져 유지보수가 힘들 수 있는데, 이럴 때 컴포넌트로 독립적으로 분리함으로써 코드를 간결하게 하여 유지보수에 용이하다.
컴포넌트 없이 사용해보기
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Without Component</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .book { | |
| text-align: center; | |
| border: 1px solid red; | |
| display: inline-block; | |
| padding: 32px; | |
| border-radius: 6px; | |
| margin: 8px; | |
| } | |
| .book_name { | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| .book_title { | |
| font-size: 16px; | |
| color: #888; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <article class="book"> | |
| <div class="book_title">제목</div> | |
| <div class="book_name">HTML</div> | |
| </article> | |
| <article class="book"> | |
| <div class="book_title">제목</div> | |
| <div class="book_name">HTML</div> | |
| </article> | |
| <article class="book"> | |
| <div class="book_title">제목</div> | |
| <div class="book_name">HTML</div> | |
| </article> | |
| <article class="book"> | |
| <div class="book_title">제목</div> | |
| <div class="book_name">HTML</div> | |
| </article> | |
| <article class="book"> | |
| <div class="book_title">제목</div> | |
| <div class="book_name">HTML</div> | |
| </article> | |
| </main> | |
| </body> | |
| </html> |
⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️
짧은 코드이지만 긴 코드라고 가정한다면 위의 코드는 가독성이 떨어지고, 반복되는 부분들이 많은 것을 볼 수 있다.
이와 같은 상황 때, 컴포넌트를 사용하여 깔끔하고 가독성 있게 정리할 수 있다.
컴포넌트를 정의하는 방법에는 아래와 같이 두 가지 방법이 있다.
1. 문자열 템플릿(string template)을 사용하는 방법
2. 싱글 파일 컴포넌트(Single File Component = SFC)를 사용하는 방법이다.
문자열 템플릿을 사용하는 방법
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> | |
| <title>Without Component</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .book { | |
| text-align: center; | |
| border: 1px solid red; | |
| display: inline-block; | |
| padding: 32px; | |
| border-radius: 6px; | |
| margin: 8px; | |
| } | |
| .book_name { | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| .book_title { | |
| font-size: 16px; | |
| color: #888; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <main> | |
| <component></component> | |
| <component></component> | |
| <component></component> | |
| <component></component> | |
| </main> | |
| </div> | |
| <script> | |
| const Component = { | |
| template: ` | |
| <article class="book"> | |
| <div class="book_title">제목</div> | |
| <div class="book_name">HTML</div> | |
| </article> | |
| `, | |
| }; | |
| const app = Vue.createApp({}); | |
| app.component("Component", Component); | |
| app.mount("#app"); | |
| </script> | |
| </body> | |
| </html> |
⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️
컴포넌트 없이 사용했을 때와 실행 결과는 똑같은 것을 볼 수 있다.
문자열 템플릿을 이용할 때 주의해야할 점이 있는데
| app.component("Component", Component); |
이와 같이 app.component("컴포넌트 이름", 컴포넌트)로 컴포넌트를 등록해야만 컴포넌트로써 사용이 가능하다.
문자열 템플릿 방법으로 구조화하여 간단한 페이지 만들기
SFC로 위와 같은 페이지를 만들기 위해 파일을 아래와 같은 구조로 구성하였다.
AppHeader.js / AppNav.js / BookComponents.js는 각각
헤더 영역 / 네비게이션 바 영역 / 책을 보여주는 각 한개의 영역(빨간 박스 한개)를 의미한다.
AppView.js는 책 한 개의 영역들을 여러 개 모아둔 BookComponents.js의 상위 영역을 의미한다.
AppView.js
| export default { | |
| template: ` | |
| <main> | |
| <section> | |
| <book-components></book-components> | |
| <book-components></book-components> | |
| <book-components></book-components> | |
| <book-components></book-components> | |
| </section> | |
| </main> | |
| `, | |
| }; |
App.js는 루트 하위 컴포넌트를 의미한다.
App.js
| export default { | |
| template: ` | |
| <app-header></app-header> | |
| <app-nav></app-nav> | |
| <app-view></app-view> | |
| `, | |
| }; |
main.js는 실제로 각 컴포넌트들을 import하고 mount하는 파일을 의미한다.
main.js
| import App from "./App.js"; | |
| import AppHeader from "./components/AppHeader.js"; | |
| import AppNav from "./components/AppNav.js"; | |
| import AppView from "./components/AppView.js"; | |
| import BookComponents from "./components/BookComponents.js"; | |
| const app = Vue.createApp(App); | |
| app.component("AppNav", AppNav); | |
| app.component("AppHeader", AppHeader); | |
| app.component("AppView", AppView); | |
| app.component("BookComponents", BookComponents); | |
| app.mount("#app"); |
각 파일들의 구조를 그림으로 표현해보면 아래와 같다.
위의 간단한 페이지를 싱글 페이지 컴포넌트(SFC)로 변환하기
| <template> | |
| 코드 | |
| </template> | |
| <script> | |
| 코드 | |
| </script> | |
| <style> | |
| 코드 | |
| </style> |
SFC로 변환하기 위해서
1. .js 파일은 .vue 파일로 변환해야하고,
2. HTML 코드는 <template></template>, JavaScript 코드는 <script></script>, CSS 코드는 <style></style> 안에 작성하면 된다.
3. .vue 파일을 실행하기 위해서는 vue를 설치해야 한다.
위 과정을 마친 후에 파일 구조를 보게 되면 아래와 같이 구성되어 있다.
문자열 템플릿 방법으로 구조화했을 때와 다른 점은
문자열 템플릿 방법의 index.html의 CSS 부분이 위 구조에서 src/assets/base.css로 위치하게 되어 스타일에 해당하는 코드만을 작성해주게 되었고, 이 base.css 파일을 App.vue에서 import하여 사용하게 되었다.
또한, View를 담당하는 파일이 views 디렉토리 안에 위치하게 되었다.
'Vue' 카테고리의 다른 글
| Reactivity(반응형) (0) | 2024.07.02 |
|---|---|
| Template Syntax (2) | 2024.07.01 |
| setup() 함수 (0) | 2024.06.20 |
| Composition API (1) | 2024.06.17 |
| Vue란 ? (0) | 2024.06.12 |