컴포넌트

모듈

자바스크립트 코드를 재사용할 수 있도록 분리한 파일을 모듈이라고 한다.

 

 

---

컴포넌트

UI를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다.

 

컴포넌트를 사용하는 이유

컴포넌트를 사용하면 UI를 재사용할 수 있다.

프론트엔드 개발을 하다보면 반복적으로 사용하는 코드들이 있는데, 이런경우 컴포넌트로 캡슐화 하여 필요한 곳에서 사용할 수 있다.

 

컴포넌트를 사용하여 UI를 독립적으로 나눔으로써 코드를 클린하게 할 수 있다.

프론트엔드 개발을 하다보면 코드가 길어져 유지보수가 힘들 수 있는데, 이럴 때 컴포넌트로 독립적으로 분리함으로써 코드를 간결하게 하여 유지보수에 용이하다.

 

 

---

컴포넌트 없이 사용해보기

 

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

짧은 코드이지만 긴 코드라고 가정한다면 위의 코드는 가독성이 떨어지고, 반복되는 부분들이 많은 것을 볼 수 있다.

이와 같은 상황 때, 컴포넌트를 사용하여 깔끔하고 가독성 있게 정리할 수 있다.

컴포넌트를 정의하는 방법에는 아래와 같이 두 가지 방법이 있다.

1. 문자열 템플릿(string template)을 사용하는 방법

2. 싱글 파일 컴포넌트(Single File Component = SFC)를 사용하는 방법이다.

 

 

---

문자열 템플릿을 사용하는 방법

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

컴포넌트 없이 사용했을 때와 실행 결과는 똑같은 것을 볼 수 있다.

문자열 템플릿을 이용할 때 주의해야할 점이 있는데

이와 같이 app.component("컴포넌트 이름", 컴포넌트)로 컴포넌트를 등록해야만 컴포넌트로써 사용이 가능하다.

 

 

---

문자열 템플릿 방법으로 구조화하여 간단한 페이지 만들기

SFC로 위와 같은 페이지를 만들기 위해 파일을 아래와 같은 구조로 구성하였다.

 

AppHeader.js / AppNav.js / BookComponents.js는 각각

헤더 영역 / 네비게이션 바 영역 / 책을 보여주는 각 한개의 영역(빨간 박스 한개)를 의미한다.

 

AppView.js는 책 한 개의 영역들을 여러 개 모아둔 BookComponents.js의 상위 영역을 의미한다.

AppView.js

 

App.js는 루트 하위 컴포넌트를 의미한다.

App.js

 

main.js는 실제로 각 컴포넌트들을 import하고 mount하는 파일을 의미한다.

main.js

 

각 파일들의 구조를 그림으로 표현해보면 아래와 같다.

 

 

---

위의 간단한 페이지를 싱글 페이지 컴포넌트(SFC)로 변환하기

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 디렉토리 안에 위치하게 되었다.