다음 코드는 div 태그를 정적으로 갯수를 지정해주고 innerHTML 을 통해 값을 넣는 코드이다.
<body>
<div id="todo-list"></div>
<div id="todo-list-2"></div>
<div id="todo-list-3"></div>
<script>
function TodoList(data, selector) {
...
this.render = () => {
const todoListDocs = document.querySelector(selector);
todoListDocs.innerHTML = `<ul>${this.data
.map(({ text, isCompleted }) =>
isCompleted ? `<li><s>${text}</s></li>` : `<li>${text}</li>`
)
.join('')}</ul>`;
};
...
}
const validData = new Validator();
const todoList = new TodoList(validData.validate(data), '#todo-list');
const todoList2 = new TodoList(validData.validate(data2), '#todo-list-2');
const todoList3 = new TodoList(validData.validate(data3), '#todo-list-3');
setTimeout(() => {
todoList.setState(data4, validData);
}, 2000);
</script>
</body>
다음 코드를 보자.
뭐가 다를까?
우선 위 코드는 <div>를 정적으로 몇개 선언해주어야했지만, 이 코드를 보면 <main class="App"></main> 이다.
$target 변수에 <main class="App"></main> 의 DOM 객체를 할당한다. ($를 붙힌 이유는 DOM 객체를 할당한 변수라는 컨벤션이다.)
이제 TodoList 생성자 함수안에서 this.$target 에 createElement('ul')을 통해서 ul 태그를 만들어준다.
그 후 ul 태그를 main 태그안에 넣어주는 것이다.
<body>
<main class="App"></main>
<script>
function TodoList(data, $app) {
...
this.$target = document.createElement('ul');
$app.appendChild(this.$target);
this.render = () => {
this.$target.innerHTML = `<ul>${this.data
.map(({ text, isCompleted }) =>
isCompleted ? `<li><s>${text}</s></li>` : `<li>${text}</li>`
)
.join('')}</ul>`;
};
...
}
const $target = document.querySelector('.App');
const validData = new Validator();
const todoList = new TodoList(validData.validate(data), $target);
const todoList2 = new TodoList(validData.validate(data2), $target);
const todoList3 = new TodoList(validData.validate(data3), $target);
...
</script>
</body>
<main class="App"></main> 는 다음과 같아질 것이다.
<main class="App">
<ul></ul>
<ul></ul>
<ul></ul>
</main>
'공부기록 > 바닐라 자바스크립트' 카테고리의 다른 글
| 자바스크립트 코드 리팩토링 (0) | 2022.07.19 |
|---|---|
| 생성자의 파라미터를 객체로 받는것에 대하여 (0) | 2022.07.19 |
| 자바스크립트 배열 내 조건에 맞는 원소 구하기 (every, some 함수) (0) | 2022.07.11 |
| Object.getOwnPropertyNames() vs Object.keys() (0) | 2022.07.11 |
| typeof , instanceof 에 대한 공부 (0) | 2022.07.11 |