todolist 구현시 Q&A - Githubissues

this.todoInput = new TodoInput($target, (text) =>{ const newData = [ ...this.$state, { id : this.$state.length+1, text : text, isCompleted : false }]; this.setState(newData); });

App.js 구현할 때
|-- components
|       `-- TodoCount.js
|       `-- TodoDeleteAll.js
|       `-- TodoInput.js
|       `-- TodoList.js
|-- App.js
|-- index.css
|-- index.html
|-- index.js
|--
구조에서 App.js에서 TodoCount , TodoDeleteAll, TodoInput, TodoList 를 관리해주었습니다. TodoInput 기능 : 할일을 입력받는다. TodoCount 기능 : 할일의 개수를 반환합니다. TodoDeleteAll 기능 : 할일을 모두 초기화한다. TodoList 기능 : 할일을 화면에 render 한다. 화면에 render 는 TodoList 에서 실행됩니다.

여기서 각 Component에서 수행되는 기능들 입력되거나, 개수를 세거나, 할일 모두 지우는등 데이터의 갱신이 App.js에서 관리되어야 하는데 단순히 Component안에서 데이터를 render하게 되면 다른 Component에서 이 Update를 받을 수 없기 때문에 좋지 않은 구현이었습니다.

코드를 보시면 알겠지만,

객체를 생성할 때 매개변수로 함수를 전달해 해당 scope에서 setState를 수행하여 값을 갱신하도록 했습니다.

이렇게 하면 App.js에서 모두 관리할 수 있었습니다.

이 방법말고 다른 방법이 있을까요??
 this.todoInput = new TodoInput($target, (text)  =>{    
const newData = [     
 ...this.$state,
{      
           id : this.$state.length+1,      
           text : text,      
           isCompleted : false    }];  
   this.setState(newData);  
});

good

lllilllilllilili / vanillaJs01

todolist 구현시 Q&A #2