투두리스트 오류 탐험기(id 중복을 피하자!)

문제점!

 

이전에 로컬스토리지에 저장을 해놨기에, 새로고침을 해도  투두리스트가 그대로 유지된다. 문제점은 새로고침을 한 이후부터이다.

 

 

 

새로고침 이후, 네 번째를 추가했다. 그리고 첫 번째를 수정하면..

 

 

 

네 번째도 같이 수정되는 오류가 발생한다.

 

 

 

 

 

원인 찾기

 

혹시 Storage에 잘못저장되기에 데이터가 꼬이나?라고 생각하기에는 너무 명확하게 의심되는 부분이 있었다. 

내가 todo 아이템을 추가할 때, id 값을 단순히 useRef를 통해 제공했기 때문이다. 

 

그렇기에 새로고침을 했을 때, useRef가 초기화되어서 다시 0이 되고,  기존의 투두리스트는 유지되지만 id가 중복되게 되는 것이다.

 

 

 

 

 

해결인 줄 알았으나....!

localStorage의 value 값에 있는 객체의 개수를 받아오면 되지 않을까 라는 생각을 했다.

 

삼항연산자를 통해 로컬스토리지에 todos가 있을 시 todos의 value를 받아온다. 그리고 Object.key().length를 통해 그 개수를 확인하고, idCount State에 업데이트한다.

 

이렇게 하면 로컬스토리지에 저장된 todos의 개수를 가져오는 것이기에, 새로고침해도 그대로 유지가 된다.

 

 

 

마지막으로 기존의 useRef를 통해 id를 제공하던 것을 지우고, 새롭게 얻은 idCount를 적용시켜 주면 id가 꼬이는 일이 없게 되는 줄 알았으나….!

 

 

 

 

삭제버튼이 복병이었다. 로컬스토리지의 value의 개수로 id를 설정하기에, 총 개수가 줄어들면 id도 당연히 줄어들 것이다.

 

즉 위의 사진처럼, 두 번째 요소를 지우고, 새롭게 네 번째 요소를 추가했을 때, id가 중복될 수밖에 없는 것이다.

 

 

 

 

 

해결

은경 스승님이 최댓값에 +1을 적용하는 방법을 알려주셨다. 그래서 적용했다.

 

datalength는 로컬스토리지에 저장된 todo의 개수를 가져오는 변수이고, 이전까지는 이 변수를 가지고 id를 설정했다. 하지만 삭제 이후 중복을 막기 위해, 마지막 요소의 id 값에 +1을 하는 방식을 사용했다.

 

인덱스 값은 0부터 시작하기에 [전체 개수 -1]로 설정해야 한다. 그래서 data[dataLength-1]을 사용했으며, 삼항연산자를 통해 빈 값일 경우(초기값) -1을, 빈 값이 아니라면 해당 요소의 id를 반환시켰다. (-1을 준 이유는 id를 0부터 시작하게 하기 위함이다)

 

최종적으로 마지막 요소의 id에 +1 을 하기 위해서 IdCount를 countValue+1로 초기화시켜줬다.

 

 

 

새로 고침해도 그대로이며, 삭제해도 중복이 안 되는 것을 확인할 수 있다.