투두리스트 id 중복을 피하자! 2탄
https://studysmart.tistory.com/94
투두리스트 오류 탐험기(id 중복을 피하자!)
문제점! 이전에 로컬스토리지에 저장을 해놨기에, 새로고침을 해도 투두리스트가 그대로 유지된다. 문제점은 새로고침을 한 이후부터이다. 새로고침 이후, 네 번째를 추가했다. 그리고 첫 번째
studysmart.tistory.com
지난 글에서 삭제버튼 클릭 시 id가 중복되는 사례를 해결했었습니다. 하지만 드로그 앤 드롭 적용 이후에 또 다른 문제가 생겼습니다.
문제점이다!
다음과 같이 3개의 todo를 만들면 id가 0번부터 큰 문제없이 잘 생성됩니다.
하지만 드래그 앤 드롭을 통해 다음과 같이 세 번째 투두를 제일 위로 올리고, 새로운 투두를 생성하면!
다음과 같이 id가 중복되게 됩니다.
원인은 다음과 같다!
1. 드래그 앤 드롭은 인덱스 번호를 기준으로 옮긴다.
2. 지난번 해결 당시, 새로운 객체의 id는 마지막 객체의 id보다 1 높게 생성되도록 했다.
그렇기에 드래그 앤 드롭으로 순서를 섞어 버리면, id가 당연하게 중복될 수밖에 없는 것입니다.
사실 이는 제 실수입니다. 지난번 은경 스승님이 가장 높은 id에 +1을 하는 방식을 알려주셨는데, 저는 단순히 맨 마지막 요소에 +1 하면 되겠지~라고 생각하고 넘겼던 것입니다.
해결을 해보겠다!
해결을 해볼 것입니다. 은경 스승님이 말씀해 주신 것을 구현할 수 있는 방법이 떠올랐어요 잊어버리기 전에 당장 해볼 거예요.
map함수로 todo의 모든 id값을 받아서 저장합니다. map함수는 배열로 값을 반환하기에, Math.max 함수를 이용해서 그 배열의 최댓값을 찾고, 그 값보다 1 높은 값을 다음 id로 사용하는 겁니다
캬 머릿속으로는 완벽한데, 진짜 될지 모르겠습니다. 보통은 다 해보고 블로그에 쓰는데 지금은 쓰면서 하고 있어요 긴장되는 순간입니다.
우선 Counting Star를 듣고 있어서 변수이름을 countingStar로 지었습니다. 이게 중요한 게 아니라, todos를 map함수로 돌리면서 각 객체의 id만 반환해서 배열로 받을 것입니다.
console.log를 찍어보면 3개의 todo 객체가 있는 상황에서 각 id 값이 잘 받아와 지는 것을 확인할 수 있습니다.
이제 Math.max 함수를 이용해서, 배열의 최댓값을 구하면 됩니다.
마찬가지로 console.log를 찍어봅니다
최댓값이 잘 나옴을 확인할 수 있습니다 ㅎㅎ
기다릴 것 없이, 바로 새로운 객체에 id를 부여하는 State인 IdCount를 업데이트 시켜줍니다. 이렇게 되면 앞으로 새롭게 생기는 id는 [기존의 id의 최댓값 +1]로 설정되기에, 드래그 앤 드롭을 해도 꼬일 일이 없을 겁니다.
이렇게 드래그 앤 드롭으로 순서를 꼬아놓고, 새로운 요소를 추가해도...!
!!!!!!!
네, 투두리스트를 삭제하고, 순서를 바꿔는 행동을 해도, 이제는 id가 꼬일 일 없이 쭉쭉쭉쭉 나올 겁니다 ㅎㅎ
이렇게 끝인 줄 알았으나....
? null????
원인은 간단합니다.. 투두리스트가 초기화면이라면, 즉 아무런 투두도 없는 상황이라면 countionStar 변수는 빈 배열일 것이고, Math.max 함수는 빈 배열일시 -Infinity를 반환하게 되어있다고 합니다. 그렇기에 null이 나올 수밖에 없는 거죠..
이를 해결하기 위해 갓항연산자를 다시 사용할 것입니다.
만약 countingStar가 빈 배열이어서 Math.max가 -Infinity를 반환한다면, -1을 반환하고, 그게 아니라면 그냥 최댓값을 반환해라!라고 입력했습니다.
-1을 반환하는 이유는 id값을 0부터 시작하게 하기 위함입니다!
초기화면부터 시작해도 id가 0부터 잘 시작되는 것을 확인할 수 있습니다 ㅎ.ㅎ
코드를 정리하면서 프로젝트를 진행하는 것이 맞을 것 같습니다. 이번에 오류를 해결하면서 제가 제 코드를 해석하고 있는 모습을 발견했습니다. 코드를 잘 짜는 것도 아닌데, 점점 쌓이니 어쩔 수 없나 봅니다. 뭐, 정리하면 되는 거죠! 가보자고