[HTML] 커스텀 HTML 태그

Web Components

<div> 들이 매우 많아 귀찮을 경우, 여러개의 <div> 태그들을 하나의 단어로 축약할 수 있는 문법

자바스크립트 문법은 아니고 브라우저 기본 기능 중 하나임.

 

커스텀 html 태그 만드는 법 

 

예를 들어서 <custom-input> 이라고 입력하면

<label><input> 이렇게 2개의 태그가 안에 출현하게 만들고 싶음

 

<custom-input> 같은 커스텀 태그를 이제부터 컴포넌트라고 칭할겁니다.

컴포넌트를 만들고 싶으면 이런 형식에 따라서 그대로 타이핑만 하면 됩니다.

이건 정해진 문법이라 이해할 필요는 없고 따라치면 됩니다. 

 

class 클래스 extends HTMLElement {

   connectedCallback() {
      this.innerHTML = '<label>이름을 입력하쇼</label><input>'
   }
}

customElements.define("custom-input", 클래스);

<custom-input></custom-input>

 

1. 컴포넌트에 어떤 html들을 집어넣을지 맘대로 설정 가능합니다.

class와 extend 문법 저렇게 그대로 써주시면 되고 (class명 작명가능)

안에는 connectedCallback() 이라는 함수안에 

여러분의 커스텀 html을 막 꾸미면 됩니다. 

(참고) connectedCallback() 함수는 컴포넌트가 html에 장착될 때 실행됩니다.

 

 

2. html 만들고 싶으면 쌩자바스크립트로 html 만드는 문법 가져다 쓰면 됩니다.

 

3. customElements.define() 처럼 써주시면 컴포넌트 등록이 가능합니다.

(컴포넌트 이름 작명시 보통 대시기호 넣는게 관습입니다)

 

 

 

 

▲ 그럼 브라우저에서 개발자도구로 검사해보면

<custom-input> 이라고 쓸 때마다 <label> <input> 이것들이 남습니다.

이것이 html을 컴포넌트로 축약해서 쓸 수 있는 Web Component 문법입니다. 

 

 

attribute를 추가하면 각각 다른 내용을 보여줄 수도 있습니다.

 

<custom-input> 쓸 때마다 같은 코드만 나오니까 쓸모없어보인다고요?

그러면 attribute를 추가해서 쓸 때마다 각각 다른 내용을 보여줄 수도 있습니다. 

 

class 클래스 extends HTMLElement {

   connectedCallback() {
      let name = this.getAttribute('name');
      this.innerHTML = '<label>${name}을 입력하쇼</label><input>'
   }
}

customElements.define("custom-input", 클래스);

<custom-input name="이메일"></custom-input>
<custom-input name="비번"></custom-input>

 

getAttribute(X)를 쓰면 현재 요소의 X라고 정의된 attribute를 가져올 수 있습니다.

그래서 name attribute가 있으면 그걸 가져와서 <label>안에 넣으라고 코드를 짜놨습니다.

그랬더니 <custom-input name="비번"></custom-input> 이렇게 쓰면 "비번을 입력하쇼"

<custom-input name="이메일"></custom-input> 이렇게 쓰면 "이메일을 입력하쇼"

라고 출력됩니다. 

attribute 활용하시면 각각 다른 내용을 보여줄 수 있습니다.

 

 

attribute가 변경될 때 특정 코드 실행도 가능합니다.

 

리액트 props 변경시 리렌더링되는 원리를 자바스크립트로 구현가능

 

class 클래스 extends HTMLElement {

   connectedCallback() {
      let name = this.getAttribute('name');
      this.innerHTML = '<label>${name}을 입력하쇼</label><input>'
   }

   static get observedAttributes() {
       return ['name']
   }
   attributeChangedCallback() {
       (attribute 변경시 실행할 코드)
   }
}

customElements.define("custom-input", 클래스);

 

static get observedAttributes() 안에 감시할 attribute들을 array로 적으면 됩니다.

그럼 그게 변경되는 순간 밑에 있는 attributeChangedCallback() 함수를 실행해줍니다.

제가 임의로 만든게 아니라 이런 함수명들이 미리 다 정해져있으니 복사해서 쓰면 됩니다. 

 

 

그럼 React, Vue에서 제공하는 자동 html 재렌더링 기능도 쌩 자바스크립트만으로 구현할 수 있는 것입니다.

attribute 변경시 html을 업데이트해주는 코드를 실행하면 끝 아니겠습니까. 

그럼 새로고침없이도 html에 변경사항을 바로바로 반영할 수 있게 됩니다. 

근데 재렌더링 그런건 React, Vue 이런걸로 웹앱을 안만들어보셨다면 아직 알 필요는 없습니다.

 

 

 

 

React, Vue와 다른 점은 

 

많이들 좋아라하는 React, Vue도 똑같은 기능을 제공합니다.

React도 html을 하나로 묶어서 component로 만들어서 재사용이 가능합니다. 

 

하지만 React는 웹앱을 만드는 라이브러리라 용도가 약간 다릅니다.

React는 state가 변할 경우 자동으로 html 재렌더링해주는 기능도 제공하고 

React는 virtual DOM을 이용해서 재렌더링을 매우 빠르고 효율적으로 도와줍니다.

하지만 문법이 약간 더러울 뿐

Vue는 더 정돈된 느낌이고 깔끔합니다.

 

출처 : 코딩애플