클래스로 목록 렌더링

Component 클래스를 상속해서 목록을 렌더링 해보자.

class ProjectItem extends Component<HTMLUListElement, HTMLLIElement>{
    private project: Project;

    constructor(hostId: string, project: Project) {
        super('single-project', hostId, false, project.id);
        this.project = project;

        this.configure();
        this.renderContent();
    }
  
    configure() {};
  
    renderContent() {
        this.element.querySelector('h2')!.textContent = this.project.title;
        this.element.querySelector('h3')!.textContent = this.project.people;
        this.element.querySelector('p')!.textContent = this.project.description;
    };
}

class ProjectList extends Component<HTMLDivElement, HTMLElement> {
    // ...

    private renderProjects() {
      	// ...

        for (const prjItem of this.assignedProjects) {
            new ProjectItem(this.element.querySelector('ul')!.id, prjItem);
        }
    }
}