컴포넌트 생성
ofa.js에서 컴포넌트는 페이지 재사용 및 모듈화를 실현하는 핵심 메커니즘입니다. 컴포넌트는 본질적으로 사용자 정의 Web Component로, 템플릿, 스타일 및 로직을 정의하여 재사용 가능한 UI 요소를 만들 수 있습니다.
컴포넌트의 기본 구조
페이지 모듈과 달리, 컴포넌트 모듈의 <template> 요소는 component 속성을 사용하며, tag 속성을 선언하여 컴포넌트 태그 이름을 지정합니다.
컴포넌트를 사용해야 하는 위치에서 l-m 태그를 통해 비동기로 컴포넌트 모듈을 로드하면 시스템이 자동으로 등록을 완료합니다. 이후에는 일반 HTML 태그처럼 해당 컴포넌트를 바로 사용할 수 있습니다.
{{title}}
컴포넌트 핵심 개념
tag - 컴포넌트 태그 이름
tag는 컴포넌트의 태그 이름이며, 반드시 컴포넌트를 사용하는 태그 이름과 일치해야 합니다. 예를 들어, 컴포넌트의 tag가 "demo-comp"로 정의되어 있다면, HTML에서 사용할 때 반드시 <demo-comp></demo-comp>라고 작성해야 합니다.
구성 요소 모듈 참조
l-m 태그를 통해 컴포넌트 모듈을 가져오면, 컴포넌트 모듈이 자동으로 컴포넌트를 등록합니다. 이는 script 태그를 사용하여 스크립트를 가져오는 것과 유사하지만, l-m은 컴포넌트 모듈의 로드 및 등록에 특화되어 있습니다.
주의:
l-m인용 태그는 비동기 인용으로, 페이지 로딩 시 필요에 따라 컴포넌트를 로드하기에 적합합니다.
동기 참조 컴포넌트
어떤 시나리오에서는 동기적으로 컴포넌트를 로드해야 할 수도 있습니다 (예를 들어 컴포넌트가 사용 전에 이미 등록되었는지 확인). 이때 load 메서드와 await 키워드를 함께 사용하여 동기 참조를 구현할 수 있습니다.
컴포넌트 모듈과 페이지 모듈에서는 자동으로 load 함수가 주입되어 개발자가 필요한 리소스를 동기식으로 로드할 수 있습니다.
{{title}}
비동기 참조 vs 동기 참조
| 참조 방식 | 키워드 | 특징 |
|---|---|---|
| 비동기 참조 | l-m 태그 |
비차단 로딩, 필요에 따라 컴포넌트를 로드하는 데 적합 |
| 동기 참조 | load 메서드와 await 키워드 함께 사용 |
차단 로딩, 컴포넌트가 사용 전에 등록되었음을 보장 |