Loading To Dos part 2

이제 parsedToDos array 내부의 item들을 가지고 그 item을 나타내보자.

이미 item을 화면에 그려주는 paintToDo function을 가지고 있기 때문에 이 function이 필요로 하는 것은 newToDo 하나 뿐이다.

 

아래의 코드에서 item은 예를 들면 a, b, c 에 해당하기 때문에 사실상 우리가 보내기를 원하는 텍스트라고 할 수 있어서, 그냥 paintToDo를 호출하기만 하면 된다.

바꾸기 전

왜냐하면 paintToDo는 텍스트를 받는데 JS는 그 텍스트를 paintToDo에게 전달해주기 때문이다.(JS는 paintToDo에 "a", "b", "c" 와 같은 것들을 넣어줌)

바꾼 후

이제 새로고침을 해도 내가 입력한 todo를 화면에 그대로 가져오는 것을 확인할 수 있다.

그런데 이때 d, e 를 추가로 입력하면 localStorage에 새로 추가한 것들만 저장되고 이전에 저장되어 있던 a, b, c가 사라지는 문제가 발생한다.

이전에 저장되어 있던 a, b, c가 사라짐

 

이런 문제가 생긴 이유는 application이 시작될 때 toDos array가 항상 비어있기 때문이다.

​그리고 newToDo를 작성하고 form을 submit 할 때마다 newToDo를 비어있는 toDos array에 그냥 push 하게 되고

newToDo를 비어있는 toDos array에 push함

그 toDo를 저장할 때는 새로운 toDo들만 포함하고 있는 array를 저장하는데, 이 array는 이전의 toDo들은 갖고 있지 않아서 이런 문제가 발생하는 것이다.

 

한 줄로 정리해보면, 내가 작성한 코드는 newTodo들만 toDos array에 추가해서 localStorage에 저장하도록 작동한다는 것이다. (이전의 toDos 목록을 잊어버리고 있다는 말과 동일함)

 

이 문제는 아주 간단하게 해결할 수 있는데, application이 시작될 때 toDos array를 빈 값으로 시작하지 않고

const를 let으로 바꿔서 업데이트가 가능하도록 만든 다음

const를 let으로 변경

localStorage에 toDo들이 있으면 toDos에 parsedToDosㄹㄹ 넣어서 전에 있던 toDo들을 복원하게 하면 된다.

밑줄 친 코드를 추가함

​이제 새로고침 후 a, b, c 를 다시 입력해보면 기존에 localStorage에 저장되어 있던 d, e 가 그대로 남아있고 a, b, c 가 추가로 저장된 것을 확인할 수 있다.​

​

또 다른 문제는 X 버튼을 클릭하여 todo 목록을 삭제해도 여전히 목록들이 localStorage에 저장되어 있어서 새로고침을 하면 다시 나타난다는 것인데,

이는 다음에 해결해보도록 하자