App.js
Todo는 useReucer의 배열의 첫번째 인자로 초기 State값 , mockTodo는 배열인데 객체 2개를 담고 있음(content1, content2)
Todolist.js
getsearchResult 함수의 반환값을 그냥 Todo로 고려해도 무방!
객체 it를 {…it}를 활용해서 객체요소 전달 (ex . { Id: 1, content : 조깅 , isDone:flase} —>props객체 안에 담김)
Todoitem.js
Todolist에게 받은 id를 onUpdate에 인수로 넣어서 실행하는 onChangeCheckbox함수
App.js
dispatch({Type:”UPDATE”, targetID})
content1은 TodoItem key=“1”
content2은 TodoItem key=“2”
targetId는 결국 TodoItem 요소가 렌더링되면서 받은 Id를 의미!
오늘의 의문점
OnUpdate는 Todoitem에서 리스트 요소를 클릭했을 때 id를 입력값으로 받아오는데
targetId는 이름:값 형식으로 지정되어있지 않고 그냥 값만 덩그러니 써져있는데 어떻게 이해해야하나 의문점이 생김.
{이름 : 값} 형식이 아니라 위와 같이 인자에 들어가는 이름과 객체 안의 이름이 같을 때는
targetId : 실제 인자에 해당하는 값(targetId가 1이면 1)으로 생각하기
reducer함수에서 state(배열)의 map메소드를 활용해 값을 읽어들일때 action(객체)의 targetId로 불러올 수 있다.
'React' 카테고리의 다른 글
| 리액트 useNavigate hook 사용 (0) | 2023.10.06 |
|---|---|
| React props로 함수 전달에서 의문점 해소 (0) | 2023.10.03 |
| React 최적화(1)-React.memo (0) | 2023.09.29 |
| useReducer 사용 (0) | 2023.09.27 |
| Props로 값 전달을 위한 스프레드 연산자 사용 (0) | 2023.09.25 |
