[리액트를 다루는 기술] 10. 일정관리

p190 ~ p200  페이지 유실

1. PageTemplate 만들기

p202 ~ p207  페이지 유실

2. 구조

- pageTemplate

-TodoInput

-TodoList

3. 상태관리

- todolist에서 데이터 상태를 정의, todoInput의 상태를 그  내부에 정의 했다면, 새로운 todolist 데이터는 로직을 어떻게 작성?

- App에서 관리하는 것이 좋음

p214 ~ p215  페이지 유실

4. id로 배열의 인덱스 찾기

- const { todos } = this.state;

  const index = todos.findIndex( todo => todo.id === id);

5. 찾은 데이터의 done 값을 반전 시키는 과정에서 ...todos[index]

- todos에서 index 부분을 모두 가지고 오너라 아닌가?

- id, text, done  객체를 담은 애들을 index 번호로 구별?

6. 데이터 삭제

- ...todos.slice( 0, index) , toggled, ...todos.slice( index + 1, todos.length)

7. 자바스크립트 findIndex 매서드

- const index = todos.findIndex( todo => todo.id === id )

8. onClick

- 자식에서 onClick 이벤트가 설정되어 있고, 부모에도 onClick() 이벤트가 설정되어 있으면

  자식 -> 부모순으로 매서드를 실행하게 됨다. 이를 propagation 이라고 함

- 이를 방지하기 위해서 자식 요소의 onClick 처리 함수 내부에 e.stopProppagation 함수를 호출해야 함

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"