싱글톤 상태 관리

프로젝트를 만들 때
목록에 추가하고
리스너 함수를 추가할 수 있는
상태 관리를 해보자.

class ProjectState {
    private listeners: any[] = [];
    private projects: any[] = [];
    private static instance: ProjectState;

    private constructor() {}

    static getInstance() {
        if (this.instance) {
            return this.instance;
        }
        this.instance = new ProjectState();
        return this.instance;
    }

    addListener(listenerFn: Function) {
        this.listeners.push(listenerFn);
    }

    addProject(title: string, description: string, numOfPeople: number) {
        const newProject = {
            id: Math.random().toString(),
            title: title,
            description: description,
            people: numOfPeople
        };
        this.projects.push(newProject);
        for (const listenerFn of this.listeners) {
            listenerFn(this.projects.slice());
        }
    }
}

const projectState = ProjectState.getInstance();

생성자를 private 으로 숨기고 getInstance 스태틱 메서드를 통해서 생성할 수 있도록 한다.

하나의 인스턴스만 사용한다.

이러한 방식이 싱글톤 방식이다.

프로젝트를 생성할 때 프로젝트 목록에 추가해보자.

class ProjectInput {
    // ...
  
    constructor() {...}

    private gatherUserInput(): [string, string, number] | void {...}

    private clearInputs() {...}

    @autobind
    private submitHandler(event: Event) {
        event.preventDefault();
        const userInput = this.gatherUserInput();
        if (Array.isArray(userInput)) {
            const [title, desc, people] = userInput;
            console.log(title, desc, people);
          
            projectState.addProject(title, desc, people);
          
			this.clearInputs();
        }
    }
	private configure() {...}
    private attach() {...}
}

프로젝트 목록 인스턴스를 생성할 때 리스너 함수를 추가해보자.

class ProjectList {
    // ...
  
    assignedProjects: any[];

    constructor(private type: 'active' | 'finished') {
      	// ...
        
        this.assignedProjects = [];
      
        projectState.addListener((projects: any[]) => {
            this.assignedProjects = projects;
            this.renderProjects();
        });
    }

    private renderProjects() {
        const listEl = document.getElementById(`${this.type}-projects-list`)! as HTMLUListElement;
        for (const prjItem of this.assignedProjects) {
            const listItem = document.createElement('li');
            listItem.textContent = prjItem.title;
            listEl.appendChild(listItem);
        }
    }

    private renderContent() {...}
    private attach() {...}
}

목록을 생성할 때 assignedProjects를 저장하고 이를 렌더링한다.

현재는 active와 finished에 모두 추가가 되고
목록이 중복이 되는 버그가 있다.

이는 다음에 해결해보자.