컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다.
일단 컴포넌트가 무엇인지 알아야한다고 생각합니다.
컴포넌트란 독립적인 소프트웨어 모듈입니다. 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 모듈로서 이후 시스템을 유지보수하거나 필요로인해 사용을할때 교체 가능한 부품이라고 생각하시면 됩니다. 재사용이 가능 한 단위로 생각하시면 될것같습니다.
컴포넌트내부의 정보는 외부로부터 숨겨지기 때문에 컴포넌트가 제공하는 서비스를 정의한 인터페이스만을 제공하고 어떤 인터페이스를 사용해야 하는지만을 알 수 있습니다.
여러개의 모듈들을 각각의 트리구조로 컴포넌트를 생성해 관리합니다.
일단 전역 컴포넌트를 등록할수있습니다.
전역 컴포넌트 등록 예시입니다. Vue.component( tagName, options )로 생성하네요.
node.js에서 require함수를 가져와서 경로에있는 ExampleComponent 모듈을 가져와 연결해줍니다.라는 뜻으로 생각하시면 됩니다.
여기사 중요한점은 컴포넌트를 등록할 때에는 항상 이름을 지어줘야 하는데 컴포넌트에 부여한 이름은 그 컴포넌트를 어디에 쓸 지에 따라 다를 수 있습니다. 컴포넌트를 (스트링 템플릿이나 싱글파일 컴포넌트로 사용하지 않고) DOM에서 바로 사용할 때는 W3C 규칙에 따라서 사용자 정의 태그의 이름처럼 쓰는 것을 추천합니다(모두 소문자로 쓰고 단어는 하이픈(-)으로 연결하는 거죠). 이렇게 하면 지금 있거나 앞으로 작성할 HTML 엘리먼트와 충돌하는 것을 피할 수 있습니다.
이름표기법의 종류에는 Kebab표기법 , Pascal 표기법이 있습니다.
Vue의 공홈에서 참조했습니다. 어떻게든 표현해도 상관없지만 DOM에서 사용시에는 Kebab 표기법만 가능합니다.
이것때문에 초반에 애먹은적이 있네요 ㅋㅋ
html 내부에서 스크립트로 컴포넌트를 생성해서 사용도 가능합니다. 하지만 저희는 전역컴포넌트를 사용하려고 하니까 저기 경로에 있는 ExampleComponent.vue를 확인해볼까요?
template 으로 감싸져있고 그 안에 html 내용이 담겨져있습니다.
그리고 export default 하나의 모듈에서 자바스크립트를 사용할수 있습니다.
연결이 성공됬을때 component mounted 라는 로그를 띄워주네요.
html 작성시나 라라벨 같은경우에 blade에서 사용할때 여러개의 모듈을 사용하고 싶은 곳에 붙혀서 넣어서 사용하는건
여러모로 많은 편리함을 줄 수 있을것같습니다.
그리고 요즘 많이 사용되는 비동적 사이트에서도 유용하게 사용할 수 있습니다.
음악 페이지를 예시로 든다면 밑에서 플레이어라는 컴포넌트로 음악을 재생시키고 board라는 컴포넌트로 게시판의 글을 확인하거나 댓글을 달수 있을거라고 생각합니다. 이처럼 컴포넌트는 굉장히 유용하다고 생각합니다. 더 많은 기능과 더 자세하게 파고든다고 하면 끝이 없기 때문에 이정도로만 마치겠습니다. 제가 비동기통신을 이용한 게시판을 작성하는 글을 올릴 때 같이 참조하면 좋을것같습니다.
Vue같은 자바스크립트 프레임워크를 사용할때에는 필수라고 생각되기 때문에 써보고 알아가면 좋을것같습니다. 감사합니다.
'공부 > Vue.js' 카테고리의 다른 글
| Vue.js 이벤트 핸들링 (0) | 2021.03.30 |
|---|---|
| Vue 조건문과 반복문 (0) | 2021.03.22 |
| Hello Vue.js (0) | 2021.03.15 |
| Vue.js 시작 (0) | 2021.03.09 |