반응형
Web Components: 커스텀 HTML 태그 만들기
HTML을 쓰다보면 자주 출몰하는 덩어리들이 있다. 이걸 한 단어로 축약하고 싶은 충동이 든다. 이때 커스텀 태그로 치환할 수 있다.
Web Components
- 자바스크립트 문법으로 구현할 수 있는 **브라우저 기본 기능**임
[상식] 웹개발 잘하고 싶으면 브라우저 기능을 잘 알아야한다. 자바스크립트 문법은 도구일 뿐이다.
<커스텀태그>로 길고 복잡한 HTML 축약하는 법
<label>과 <input> 태그를 <custom-input>으로 축약해보자.
<body>
<custom-input></custom-input> ➡️ 이렇게 쓰면 label과 input이 나옴
<script>
class 클래스 extends HTMLElement {
connectedCallback(){ // 정해진 함수명임
this.innerHTML = `<label>이메일인풋이에요</label><input>`
}
}
customElements.define('custom-input', 클래스);
</script>
</body>- **connectedCallback()** : 우리가 만든 태그가 HTML에 장착될 때 실행할 코드 적는 곳. 정해진 함수명임.
- **this.innerHTML** : 새로 생성될 <custom-input> 요소
HTML 생성하는 다른 방법
this.innerHTML 대신 더 효율적으로 HTML을 생성하는 방법이 있다. 왜냐하면 HTML 생성 속도가 더 월등히 빠르기 때문이다.
let 변수 = document.creatElement('label');
this.appendChild(변수);<커스텀 태그>의 장점
- HTML 중복 제거
- 다른 페이지에서 재활용 가능 (함수 문법이라 생각하면 됨)
<커스텀태그> 안에서도 파라미터문법같은거 구현 가능 -> this.getAttribute()
<body>
<custom-input name="비번"></custom-input>
<script>
class 클래스 extends HTMLElement {
connectedCallback(){
let name = this.getAttribute('name'); // name의 속성 가져오기
this.innerHTML = `<label>${name}인풋이에요</label><input>`
}
}
customElements.define('custom-input', 클래스);
</script>
</body>
- 각각 다른 내용 생성 가능
attribute 변경감지기능 제공 -> observedAttributes(), attributeChangedCallback()
React, Vue 특징: props(attribute) 변경되면 html이 자동 렌더링됨. 커스텀태그도 자동으로 감지 가능.
React Hooks의 useEffect를 생각하면 될 것 같다.
<body>
<custom-input name="123"></custom-input> ➡️ 이렇게 쓰면 label과 input이 나옴
<script>
class 클래스 extends HTMLElement {
connectedCallback(){
this.innerHTML = `<label>이메일인풋이에요</label><input>`;
}
static get observedAttributes() { // name이라는 attribute 바뀌는지 감지해주세요
return ['name']
}
attributeChangedCallback(){ // 바뀌면 이거 실행해줌
console.log(this.getAttribute('name'));
}
}
}
customElements.define('custom-input', 클래스);
</script>
</body>123attribute 변경할 때마다 뭔가 코드실행도 되네~
만약 attribute 변경될 때마다 html을 재렌더링하고 싶다면?
attributeChangedCallback(){ // 바뀌면 이거 실행해줌
this.innerHTML = `<label>이메일인풋이에요</label><input>`;
}attribute 변경할 때마다 html 재렌더링하고 싶은 경우 사용한다. (React, Vue랑 비슷한 재렌더링 기능구현 방법임)
결론
Web COmponents 기능 쓰면 긴 HTML도 함수처럼 재사용 가능.
이런 작업들을 잘하는 라이브러리가 바로 React, Vue다. 걔네가 더 잘하고 더 다양한 기능도 제공한다.
또 Web Components 기능을 더 쉽게 쓸 수 있게 도와주는 라이브러리 Lit, Stencil 등이 있으니 쓰면 된다.
반응형
'Front-End: Web > JavaScript' 카테고리의 다른 글
| [코딩애플] js part 3-12. class로 만들어보는 2D 게임 (0) | 2022.10.22 |
|---|---|
| [코딩애플] js part 3-11. shadow DOM과 template으로 HTML 모듈화하기 (0) | 2022.10.22 |
| [코딩애플] js part 3-9. Map, Set 자료형 (0) | 2022.10.21 |
| [코딩애플] js part 3-8. Symbol 자료형 (0) | 2022.10.21 |
| [코딩애플] js part 3-7. for in / for of 반복문과 enumerable, iterable 속성 (0) | 2022.10.21 |