오늘목표
- 정예반 과제 완료하기 (O)
오늘 어려운점
-
정예반 과제에서 수정하기 버튼을 눌렀을때 edit 페이지로 이동을 하고
전에 이미 입력되어있던 title과 content를 수정하기 페이지에도 그대로 들고오는걸 하는도중에
엄청 꼬이고 해맸다.
처음에는 우선 useParams로 id 값을 추출한후 들어오는 데이터id와 같은 걸뽑아 내기 위해서 find 함수를 사용해서 변수를 하나만들고 input 값이나 contents 값을 value에 넣어주면 안될까했는데 큰 오산이였는게 그전에 값이 고정으로 들어가는 작은 이슈가 있었다.
결국 수정 하기에서 useState를 2개 만들어서 그 초기값들을 find 함수 값을 뽑아온 친구들로
지정 을 해주어서 문제를 해결했다. -
또한 수정하기 부분에서 findIndex 를 사용해서 문제를 해결했는데
findIndex는 요소가 없으면 -1을 반환하기에
``if (editIndex !== -1) {
const updatedData = [...data];
updatedData[editIndex] = newData;
console.log("updatedData[editIndex]=>", updatedData[editIndex]);
setDate(updatedData);
``
데이터 배열의 복사본을 만든후 -> updatedData[editIndex] = newData; 새로운 걸로 교체를 하고 setData로 값을 변경 해주었어서 수정하기 부분을 완성했다.
느낀점
- 오늘 정예반 과제를 하루 동안 진행했는데 프로젝트를 진행 하면서 수정하기 부분을 많이 다뤄보지 못했는데 이번 정예반 과제를 하면서 직접 생각하고 다뤄보니 정말 쉽지는 않았다.
그래도 콘솔로 하나하나 찍어보고 안되면 다시 생각해보고 해서 수정하기 부분만 많은 시간이 걸렸는데 수정하기 부분을 쫌더 다른 과제에도 접목해서 사용을 해봐야 겠다고 생각을 많이 하였고
CRUD는 최소한 익숙해지고 금방 떠오를수 있도록 이번주에 계속 해보자 라는 생각도 하였습니다.
