JS - [To Do리스트 만들기(JSON.stringify / JSON.parse / filter)]

Adding To Dos

 

   < To Do 입력하면 화면에 출력 >

Todo list를 만들어보자.

우선 사용자가 Todo를 입력할 form과, Todo를 나열할 list가 필요하다.

 

아래와 같이 form과 list를 만들었다.

해당 요소들을 JS에 가져오고 submit event를 작성해보자.

우선 브라우저의 기본동작을 막고(submit이므로 새로고침), input의 value를 받아온다.

지금은 값을 넣고 Enter를 누르면 입력값이 그대로 남아있다. 이는 value에 빈 값("")을 넣으면 간단히 해결된다. 그리고 그 전에 입력값을 저장해주도록 한다.

 

새로운 함수를 만들어서, 입력값을 리스트 요소로 추가해주도록 하자. 이 때 li안에 span 자식을 만들고, span 태그 안에 입력값을 넣어주자.

그럼 이제 이 새로운 li를 list(toDoList)에 추가되도록 해주고, 이 함수는 form이 submit되었을 때 실행될 수 있도록 handleToDoSubmit 함수 안에 넣어준다.

 그러면 값을 넣었을때 아래쪽에 리스트로 잘 나타난다!

 

---

Deleting To Dos (화면에서 삭제)

 

   < 삭제 버튼 누르면 화면에서 삭제 >

이제 ToDo를 삭제하는 버튼을 만들어보자.

아래와 같이 button 요소를 생성하고, 기본 텍스트는 X로 넣어주고, li의 자식으로 추가해주었다.

그리고 버튼에 click event를 listen해주고, 삭제하는 함수를 추가해준다.

그런데 button을 클릭했을 때 deleteToDo 함수가 실행되지만, 어떤 버튼을 지워야 하는지, 즉 어떤 버튼이 클릭되었는지 알 수가 없다.

우리는 앞서 배웠다시피 클릭에 대한 정보, 즉 event에 대한 정보를 받아올 수 있다. target은 클릭된 HTML element를 나타낸다. 즉 아래와 같이 클릭된 HTML element에 대한 정보를 받을 수 있다.

위와 같이 입력 후 확인해보면 여러 property중에 parentElement 혹은 parentNode를 확인할 수 있다. parentElement는 클릭된 element의 부모를 나타낸다. 즉 이를 통해 button의 parent가 누구인지 확인할 수 있다는 점이다!

따라서 아래와 같은 코드로 선택된 버튼의 부모 요소를 가져올 수 있다. event.target은 클릭된 button을, event.target.parentElement는 클릭된 button의 부모 li를 나타낸다. 이제 우리는 어떤 요소를 삭제해야 하는지 알 수 있다. remove 메서드로 해당 요소를 지워주는 코드를 추가해주면 끝!

 

---

Saving To Dos

 

   < localStorage에 입력한 To Do 저장 >

새로고침하면 입력한 To do들은 사라진다. 

ToDo들을 localStorage에 저장하고, 새로고침하면 localStorage에서 불러와서 화면에 보여주면 된다.

 

우선 ToDo들을 저장해보자.

아래와 같이 배열을 만들었다. 이제 newTodo를 그리기 전에(paintToDo 실행 전에) 그 텍스트를 array에 push하도록 한다.

배열 생성

toDos 배열에 newTodo 추가

이제 이걸 localStorage에 저장하면 되는데, array는 localStorage에 저장할 수 없다.(localStorage에는 오직 텍스트만 저장 가능) 

localStorage.setItem("todos", toDos); 로 array 자체를 저장했을 경우

이걸 array 형태로 저장하려면 어떻게 해야 할까?

브라우저가 가지고 있는, JavaScript object나 array나 어떤 것이든 string으로 바꿔주는 JSON.stringify( ) 기능을 이용하면 된다.

아래와 같이 함수를 작성하고 확인해보면

배열 형태로 잘 저장됨!

 

---

Loading To Dos

 

   < 화면에 localStorage에 저장된 값 불러오기 >

새로고침하면 localStorage에 값들은 저장되어있지만, 화면에서는 사라진다. 이제 이 부분을 고쳐보자.

 

JSON.parse() 를 이용하면 String을 JavaScript object로(혹은 array) 만들어줄 수 있다.

그러니까 JSON.stringify 를 이용해 array(object)를 String으로 만들고, JSON.parse() 를 이용해 String을 다시 array(object)로 만들어줄 수 있다.

String을 Array로 변환했음

localStorage에 JSON.stringify()를 이용해 넣은 값을 JSON.parse() 를 이용해 꺼내보면 array형태로 잘 나타나고 있다.

 

이제 JS에서 localStorage에 저장한 값들을 가져온다. 이때 localStorage에 값이 있다면, 즉 savedToDos 값이 있다면(=null이 아니라면) JSON.parse() 로 array로 변경해준다.

console.log(parsedToDos)로 잘 출력되는지 확인

 

---

array로 가져왔으니, forEach를 사용해 각각의 item에 대해 function을 실행할 수 있다.

그리고 submit eventListener가 event(argument)를 제공해 준 것처럼, JS는 처리되고 있는 item 또한 그냥 제공해준다. 아래와 같이 입력 후 확인해보면

parsedToDos.forEach(sayHello) 실행 결과 확인

어떤 요소에서 함수가 실행되었는지 알 수 있다!

참고로 위와 같이 사용하는 대신 arrow function(화살표 함수)를 이용해 아래와 같이 function을 더 짧게 작성할 수도 있다.

 

 

화면에 item을 나타내는 paintToDo function을 이미 만들어 놓았다. 그러니 parsedToDos 각각의 item에 paintToDo 함수를 실행시켜주기만 하면 된다.

 

그리고 실행해보면 array에 있는 item들이 화면에 잘 출력된다!

 

---

   < 새로고침 해도 이전 값 불러오기 >

그런데 localStorage를 확인해보면 새로고침하면 이전에 저장한 값들은 없어진다.

이는 application이 시작될 때 toDoas arry가 항상 비어있기 때문이다! newToDo를 작성하고 form을 submit할 때마다 newToDo를 toDos array(빈 array)에 그냥 push하고, localStorage에 저장할 때 새로운 toDo들만 포함하고 있는 array를 저장하고 있다.

application 시작할때 항상 비어있게됨

빈 array에 newToDo 입력

localStorage에 새로운 값만 저장한 array를 저장함

 

이는 간단히 해결할 수 있다. toDos를 let으로 해서 변경 가능하도록 하고,

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

그러면 newToDo를 array 에 넣을 때, 이전 값들이 들어있는 toDos array에 넣게 되므로 잘 해결된다!!! 

 

---

Deleting To Dos (array, localStorage에서 삭제)

 

   < 삭제 버튼 누르면 array, localStorage에서도 삭제 >

지금은 To Do를 지울 때마다 화면에서만 바뀌고 localStorage에 반영되지 않는다. 이를 해결해보자!

 

deleteToDo function은 화면에서 어떤 HTML의 element를 지워야 하는지 알고 있다.

그렇지만 데이터베이스에서 어떤 todo를  지워야 하는지 모른다. 중복된 값이 들어있을 때 첫 번째 값을 지우면 어떤걸 지웠는지 알지 못한다. 그래서 toDos array를 더 좋은 방법으로 만들어야한다. 우리는 각각 item에 id를 주고, object로 만들어서 array에 저장할 것이다.

 

 

랜덤한 ID는 Date.now() -밀리초(1000분의 1초)를 주는 함수-  함수를 이용해 줄 것이다. 이제 toDos에 object를 push하도록 바꿔보자.

다음과 같이 랜덤한 id값과 text값을 담을 수 있도록 object를 생성했다. 그리고 이 newTodoObj를 toDos array에 넣어줬다.

확인결과 입력한 값 'he'는 text에 들어가고, 랜덤한 id값도 잘 들어가 있다.

 

---

현재 paintToDo function은 text값 newTodo만 가져오고 있다. 이걸 object로 바꾸자.

text에서 object로 바뀌었으니 span태그의 innerText에 text값만 들어갈 수 있도록 변경해 준다.

id로 각각의 item을 구별하고 싶으니 pintToDo 함수에 HTML의 li태그에 랜덤으로 받아온 id값을 추가해주도록 한다.

 

---

 

이제 우리가 X를 누른 버튼의 id를 얻어서, user가 어떤 id를 지우길 원하는지 알려줘야 한다.

이제 우리가 할 일은, item을 array에서 지우는 게 아니라, 지우고 싶은 item을 빼고 새 array를 만드는 것이다. 즉 예전 array는 그대로 있고, 지우고 싶은 item을 제외하고 새 array를 만드는 것이다. 이건 filter 함수를 사용하면 된다. filter는 forEach 함수와 유사하다.

 

[1, 2, 3, 4].filter(myfunction) 와 같은 코드가 있다면 1, 2, 3, 4 각각에 myfunction 함수를 실행시킬 것이다. array의 각 item이 filter funtion의 첫 번째 argument가 된다. 여기서 우리는 array에 객체를 담아놨으니 받아오는 item(1, 2, 3, 4)은 object일 것이고, 새 array에서 유지하고 싶은 object에 myfunction함수가 true를 리턴, 제외하고 싶다면 false를 리턴하면 된다.

 

아래와 같이 deleteToDo function에 li의 id와 같은 요소를 array에서 제외하는 코드를 넣어주었다.

todo말고 다른 이름으로 해도 OK

그런데 실행해보면 array에서 지워지지 않는다. 확인해보면 li의 id는 String으로, array에 들어있는 item(toDo)의 id는 number로 되어있다.

그러니 아래와 같이 parseInt() 코드를 추가해주고, localStorage에도 해당 array를 다시 저장해주도록 하자. 그러면 삭제가 잘 된다!

---