새로운 todo리스트를 만들어서 이번엔 글을 수정하는 기능을 넣어보았다.
처음에는 이렇게 새로운 state를 만들어서 수정한 메세지를 담을 변수를 만들고 그걸 다시 todo의 해당 content를 찾아 넣는 방식으로 구현했다. 먼저 수정한 메세지를 담을 변수 text의 기본값을 빈값으로 만들고 수정버튼을 누를때마다 해당 id값을 가져와서 같은 id의 객체를 찾아 content를 text에 넣었고 그 값을 input태그의 value로 넣었다. 그럼 수정버튼을 누를때 기존 내용을 가져올 수 있었다.
하지만 이 방법에 치명적인 오류가 있다. 하나만 수정할땐 text값이 해당 id의 content값으로 잘 받아오는데 두개를 같이 수정하면 두번째 수정버튼을 누렀을때 넘겨지는 id의 content값으로 text가 전부 바뀐다.
어떻게 해결해야할지 고민하다가 리스트를 담을 컴포넌트를 따로 만들어주기로 했다. 그리고 컴포넌트 내부에 text state를 넣어 보았다.
(코드내 상단 메뉴를 누르면 다른 파일도 볼 수 있습니다)
컴포넌트를 분리해서 todo, setTodo, item을 넘겨주고 Edit 컴포넌트에서 수정기능을 구현했다. 결과는 대성공!
CRUD중 가장 어려웠던 Update를 드디어 마무리하였다. 사실 처음엔 하나씩만 수정해서 오류가 생긴줄 몰랐는데 계속 만지작(?)거려보니 오류를 찾았던 것이다. 기능 구현을 다 하더라도 여러번 계속보고 사용해봐야 생각치못한 오류를 찾을 수 있을 것 같다.
추가로 같은 기능을 다른 배열메서드를 사용해서 구현한 코드가 있어 첨부한다
findIndex와 splice는 알았지만 내 코드에서 어떻게 적용해야할지 감이 안잡혔는데 이 코드를 보며 조금 반성하게 되었다.. 앞으로는 다양한 메서드를 사용해서 코드를 적어야겠다.
