TodoMVC에서 React를 이용한 투두리스트는 ES6가 아니였기 때문에 React-todoMVC를 참고하였습니다.
- Todo 를 Storage에 저장하지 않았기 때문에 MVC 패턴으로 구현한 것은 아닙니다.
1. Add
TodoTextInput에서 submit 되는 값을 App의 state : todos 에 추가한다. todos는 json 임
2. Remove
TodoItem 컴포넌트안의 삭제버튼의 클릭 핸들러로 props로 주어진 deleteTodo 함수를 호출한다. 전체 todo list의 정보를 App 컴포넌트가 알고 있기 때문에 App.deleteTodo를 이용하여 삭제
3. Modify
수정이 초큼,..이해하기 힘들었다.
VanilaJS로 만든 TodoList는 더블 클릭 -> 인풋 폼으로 변화까지의 코드가 이렇게 긴데 리액트를 이용하면 state 몇개 지정해주고 TodoTextInput 재사용해주면 끝. 이것이 라이브러리의 힘 !
- state : editing이 어느 컴포넌트에 있어야 할까
TodoItem의 label을 더블 클릭하면 숨겨져 있던 Input 태그가 보여져야한다. 더블 클릭의 핸들러로 setState를 이용해서 editing 을 true로 바꿔주었다.
handleDoubleClick = () => {
this.setState({editing : true})
}editing이 true로 바뀌면 li 태그의 className이 editing으로 바뀌고 수정 모드로 들어간다. 기존의 리스트 뷰 -> input 폼
return(
<li className = {classnames(
editing : this.state.editing
)}>
{element}
</li>
)각각의 TodoItem의 수정 상태를 클릭에 따라 바뀔 수 있어야하니까 state로 가지고 있는 것이 맞다.
바뀐 값을 todos에 다시 적용해야 하기 때문에 props로 받은 App의 editTodo 함수를 호출한다. (자식도 prop를 통해서 부모의 메소드를 호출할 수 있는건가)
아직 state와 props의 개념을 정확히 이해하지 못한상태
constructor(props), super(props)의 역할 / 자바스크립트 프로토타입 다시..
localStorage를 붙일 수 있남..
<TodoItem key = {todo.id} todo= {todo} {...actions}/>여기서 {...actions}는...
