092524 til crude u update

crud 중에 u update 가 가장 어렵다는데

 

세상에

 

나는 왜 뒤 돌아보면 까먹는지 이해불가 

 

그래서 다시 물어보러감 

 

update 의 작업단계 

 

1.무엇을 눌렀는지 , 

 

2.어떻게 바꿀것인지 

 

3.어떻게 보여줄지 

 

찾고 바꾸고 화면에 다시 어떻게 그려줄지 라고 크게 생각 한다 

 

update 는 이미 존재 하는 데이터를 수정 하는 것이다 

 

그래서 특정 아이템의 id와 수정할 데이터를 보내서 업데이트해야함.

---

수정하려는 데이터를 받음 

수정할 아이템의 id를 식별 

해당 데이터를 업데이트 

 

 

id => 고유한 키값 

 

바꿔야할 요소를 가져올수있다 

 

내가 바꿔야 할 요소를 어떻게 가져올것인가 

 

id를 통해서 가져오겠다 

 

id가 일치하는지 , 일치하지 않는지 

 

일치하는경우 , 

 

return {

id: todo.id, // 기존 id 유지

text: todo.text, // 기존 텍스트 유지

completed: !todo.completed // completed 상태를 반전시킴

};

 

return { 

id: todo.id

text: todo.text

completed: !todo.completed          //false 이면 true 로 , true 이면 flase 로 바꿔준다al 실행 

 

 

일치하지않을 경우 

 

실행 return 

 

 

 

map은 배열을 반복하고 새로운 요소를 한번씩 돌린다 

하나씩 todo 리스트를 돌리고 , 순찰 ,확인하고 10개씩 다 돌고 새로운 배열을 반환 

 

export const SAMPLE_TODOS = [

{ id: 1, text: "Buy milk", completed: false },

{ id: 2, text: "Clean the house", completed: true },

{ id: 3, text: "Go for a run", completed: false },

{ id: 4, text: "Finish homework", completed: false },

{ id: 5, text: "Call mom", completed: false },

{ id: 6, text: "Buy groceries", completed: false },

{ id: 7, text: "Walk the dog", completed: false },

{ id: 8, text: "Read a book", completed: false },

{ id: 9, text: "Do laundry", completed: false },

{ id: 10, text: "Write code", completed: false },

];

 

 

 

내가 toggleCompleted 를 클릭했을때 

 

클릭한 id 가 , 투드리스트의 id 와 같은지 

 

만약에 toggleCompleted 가 3일때 

 

투드리스트가 id 가 2번이면 

 

일치 하지 않음 으로 , 

 

return todo , 

 

 

만약에 toggleCompleted 가 3일때

 

투드리스트가 id 가 3번이면 

 

id:todo.id 

text: todo.tex

completed:!todo.completed

 

id3번은false 니까 true 로 바뀐다 

 

 

이렇게 해서 10번 씩 다 돌고 난 다음에 

 

// 5. 상태를 새로운 배열로 업데이트합니다.

setTodos(updatedTodos);

};

 

새로운 배열을 반환 한다 .  (새로 화면에 뿌려주기)

 

update

1.누른게 어떤 값인지 찾고

2. 그 값이 일치하는지 

3.어떻게 바꿔줄지 정의 한다 

---

 

 

강의 보고 컴포넌트 분리하는것을  따라하다가 

 

투드리스트 입력 하는 폼이 사라짐 ... 

 

다시 보면서 찾는 중 ... 

 

너무 어려운 CRUD 

 

계속 반복 하는데 까먹어서 자괴감 든다 

 

집중력 zero 라 더 힘듬 ..