# Web Components

Web Component

: 반복해서 쓰는 태그 뭉치들을 커스텀 태그로 축약해서 쓸 수 있다.

• 브라우저의 기본 기능 중 하나.
• class를 이용해 만듦.
• 긴 HTML도 함수처럼 재사용이 가능하다.

상식) 웹개발을 잘하기 위해서는 브라우저 기능을 잘 알아야 한다.

-> JS 문법은 도구일 뿐이다.

장점

html 중복제거, 다른 페이지에서 재활용가능

예시

html

<custom-input name="비번"></custom-input>

JS

class 클래스 extends HTMLElement{
	connectedCallback(){
    	let name = this.getAttribute('name'); // Attribute 추가
    	this.innerHTML = `<label>${name}인풋이에요</label><input>`
         // 아래 방법으로 하면 html 생성속도 빨라짐
   	     //	let 변수 = document.createElement('label');
  		 // this.appendChild(변수)
    }
    static get observedAttributes(){
    	return ['name'] // name이라는 attribute가 바뀌는지 감시
    }
    attributeChangedCallback(){
  		console.log(this.getAttribute('name')) //attribute가 바뀌면 이거 실행
    }
}
customElements.define('custom-input', 클래스);

참고)

React,Vue 특징 : props(attribute)가 변경되면 html이 자동 재랜더링됨.
Web Components 기능 쉽게 쓸 수 있게 도와주는 라이브러리 : Lit, Stencil 등