Web Components Callback Methods & lifecycle

web component에 대해서는 아래 내용을 먼저 읽고 오자.

2021.08.14 - [Web] - Web component (Custom Elements, Shadow DOM, Template)

 

connectedCallback()

component가 DOM에 추가 되면 가장먼저 불리워지는 method이다.

해당 Component에 event가 bind 되어야 한다면 가급적 여기에서 모든 event를 bind 해줘야 한다.

앞서 만들어 놓은 helloworld 컴포넌트에 아래와 같이 callback method를 override 해보자.

class HelloWorld extends HTMLElement {
    constructor(){
        super();
        const $template = document.querySelector('#hello-world-template');
        const contents = $template.content;

        const shadow = this.attachShadow({mode:'open'});

        shadow.append(contents.cloneNode(true));
    }

    connectedCallback(){
        console.log("DOM에 HelloWorld가 추가 되었습니다.");
    }
}

 

Dom에 컴포넌트가 추가되면서 log가 찍힌것을 확인할 수 있다.

export default class CustomButton extends HTMLElement {
    constructor(){
        super();
        this.timesClicked = 0;
        this.render();
    }

    getTimeClicked(){
        return `Times clicked : ${this.timesClicked}`
    }

    render(){
        this.innerHTML = this.getTemplate();
    }

    getTemplate(){
        return `
            <button> Click Me </button>
            <span> ${this.getTimeClicked()} </span>
        `;
    }

    handleClick(){
        this.timesClicked++;
        this.querySelector('span').innerText = this.getTimeClicked();
    }

    connectedCallback(){
        this.querySelector('button').addEventListener('click',(e)=> this.handleClick(e));
    }

};

customElements.define('custom-button', CustomButton);

위의 컴포넌트는 DOM에 add가 되면 button에 click eventlistener를 넣는 것을 보여주는 코드이다.

 

disconnectedCallback()

DOM에서 삭제되는 순간 불리워지는 Callback Method이다.

앞서 Event bind한게 있다면 여기서 모두 지워주자.

위의 Button에 해당 기능을 추가해 보자.

export default class CustomButton extends HTMLElement {
    constructor(){
        super();
        this.timesClicked = 0;
        this.render();
    }

    getTimeClicked(){
        return `Times clicked : ${this.timesClicked}`
    }

    render(){
        this.innerHTML = this.getTemplate();
    }

    getTemplate(){
        return `
            <button> Click Me </button>
            <span> ${this.getTimeClicked()} </span>
        `;
    }

    handleClick(){
        this.timesClicked++;
        this.querySelector('span').innerText = this.getTimeClicked();
    }

    connectedCallback(){
        this.querySelector('button').addEventListener('click', this.handleClick.bind(this));
    }

    disconnectedCallback(){
        console.log('Button Disconnected Callback');
        this.querySelector('button').removeEventListener('click',this.handleClick);

    }

};

customElements.define('custom-button', CustomButton);

 

document.querySelector('custom-button').remove(); 를 이용해서 삭제되는 것을 볼 수 있다.

 

adoptedCallback()

parent node가 변경되면 본 callback이 발생하게 된다.

export default class CustomButton extends HTMLElement {
    constructor(){
        super();
        this.timesClicked = 0;
        this.render();
    }

    getTimeClicked(){
        return `Times clicked : ${this.timesClicked}`
    }

    render(){
        this.innerHTML = this.getTemplate();
    }

    getTemplate(){
        return `
            <button> Click Me </button>
            <span> ${this.getTimeClicked()} </span>
        `;
    }

    handleClick(){
        this.timesClicked++;
        this.querySelector('span').innerText = this.getTimeClicked();
    }

    connectedCallback(){
        this.querySelector('button').addEventListener('click', this.handleClick.bind(this));
    }

    disconnectedCallback(){
        console.log('Button Disconnected Callback');
        this.querySelector('button').removeEventListener('click',this.handleClick);

    }

    adoptedCallback(){
        console.log('move to somewhere');
    }

};

customElements.define('custom-button', CustomButton);

 

attributeChangedCallback()

Custom Elements도 Attributes를 갖을 수 있게 된다. 

    <custom-button btitle="click one more time"></custom-button>

예를 들자면 위와 같이 btitle을 추가하면 

• static get observedAttributes()

를 통해서

• attributeChangedCallback(attributes name, oldValue, newValue)

를 실행하게 된다.

여기에서 attributesname은 바뀌는 attributes에 따라 name(key)가 들어오게 된다.

그리고 attributes는 대문자를 쓰지 않는다는 걸 잊지 말자.

export default class CustomButton extends HTMLElement {
    constructor(){
        super();
        this.timesClicked = 0;
        this.render();
    }

    getTimeClicked(){
        return `Times clicked : ${this.timesClicked}`
    }

    render(){
        this.innerHTML = this.getTemplate();
    }

    getTemplate(){
        return `
            <button> Click Me </button>
            <span> ${this.getTimeClicked()} </span>
        `;
    }

    handleClick(){
        this.timesClicked++;
        this.querySelector('span').innerText = this.getTimeClicked();
    }

    connectedCallback(){
        this.querySelector('button').addEventListener('click', this.handleClick.bind(this));
    }

    disconnectedCallback(){
        console.log('Button Disconnected Callback');
        this.querySelector('button').removeEventListener('click',this.handleClick);

    }

    static get observedAttributes(){
        console.log('observedAttributes');
        return ['btitle'];
    }

    attributeChangedCallback(attName, oldValue, newValue){
        console.log(attName, oldValue, newValue);
        this.querySelector('button').innerText = newValue;
    }

    adoptedCallback(){
        console.log('move to somewhere');
    }

};

customElements.define('custom-button', CustomButton);

 

Sample 페이지는 다음을 참조하는게 좋을 것 같다.

https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks

2021.08.14 - [Web] - Web Component publish 공개 하기

Web Component publish 공개 하기