컴포넌트(Component)
- 재사용 가능한 각각의 독립된 기능의 모듈
main.js
import App from './App.js'
const root = document.querySelector('#root')
root.append(new App().el)
App이라는 것을 하나의 컴포넌트로써, 화면에 출력할 하나의 ui개념으로 만들어서
현재 main.js에서 append로 출력하는 코드입니다.
그 전에 우선 컴포넌트를 만들겠습니다.
heropy.js
////// Component //////
export class Component {
constructor(payload = {}) {
const {
tagName = 'div',
state = {}
} = payload
this.el = document.createElement(tagName)
this.state = state
this.render()
}
render() {
}
}해당 컴포넌트는 createElement로 태그를 만들때 어떤 요소로 만들지를 하나의 컴포넌트로 만들어
편하게 사용하기 위함인데, payload로 태그네임을 입력받거나 기본 요소 div를 사용하고 원하는 요소로 생성할 수 있고, state를 사용하여 상태를 관리합니다. render를 통해 관련 내용을 실행하는 컴포넌트입니다.
App.js
import { Component } from "./core/heropy.js";
export default class App extends Component {
constructor() {
super({
state: {
inputText: '' // 선언적 렌더링
}
})
}
render() {
this.el.classList.add('Search')
this.el.innerHTML = /*HTML*/`
<input />
<button>Click!</button>
`
const inputEl = this.el.querySelector('input')
inputEl.addEventListener('input', () => {
this.state.inputText = inputEl.value
})
const buttonEl = this.el.querySelector('button')
buttonEl.addEventListener('click', () => {
console.log(this.state.inputText)
})
}
}모든 코드를 정리하면, 컴포넌트라는 클래스를 만들어서 그 클래스를 App이라는 이름의 새로운 클래스에서 상속 또는 확장하여서 컴포넌트라는 클래스가 가지고 있는 규칙들을 통해 내용을 만들고 그 안에서 render를 통해서 input이벤트라던가 button이벤트를 활용해서 각각의 요소에서 값을 입력받거나, 버튼을 클릭할 수 있는 상황들을 만들 수 있다는 내용이고, 그때의 사용하는 데이터들을 state라는 이름의 객체를 통해서 데이터를 새롭게 만들어서 활용 할 수 있습니다.
