[Js] component

컴포넌트, vue로 프로젝트 했을때 무작정 만들어봤었는데,, 차근차근 알아보자!🫠

컴포넌트란? 🤨

재사용이 가능한 독립된 모듈을 뜻한다. 웹페이지를 구성할 때 레고블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구상할 수 있다.

파일구조

• App.js
• main.js

main.js

//component
export class component {
    //component로 내보내기
    constructor(payload = {}) {
        //payload 매개변수, 객체데이터로 시작이어서 빈값
        const { tagName = 'div', state = {}, props = {} } = payload;
        //tagName 값 설정, 태그이름을 받거나 이 부분에 값이 없으면(기본값으로) div문자를 사용하겠다.
        this.el = document.createElement(tagName); //tagName값 할당, 요소생성
        //el부분에 요소를 메모리 상으로만 하나를 추가

        this.render(); //최초한번실행 (밑render함수를 실행시킴)
    }
    render() {} //확장해서 사용할 때 작성
}

App.js

import { component } from './core/heropy'; //컴포넌트 클래스를 가져옴
import TheHeader from './components/TheHeader';

export default class App extends component {
    //가져온 컴포넌트를 확장(상속)해서 사용
    constructor() {
        super({ tagName: 'h1' }); //내용이 동작하도록 super함수를사용, h1태그를 생성하고 싶으면 여기에 작성
        // (super함수 내부에 render메소드 실행될수있는 내용이있음 그래서 화면에 출력할 render를 밑에 작성)
    }//constructor super 생략가능함(비어있을경우 기본값으로 들어가있음)
    render() {

        this.el.textContent = 'Hello'; //Hello이 h1태그로 출력
    }
}

구현화면

h1 태그에 Hello 글씨가 화면에 출력이된다. 간단하게 컴포넌트해서 문자를 출력해봤는데, 앞으로 프로젝트를 할 때 컴포넌트를 잘 활용해봐야겠다~!!👀