Loading To Dos part 1

현재 우리의 toDos 는 localStorage에 있는데, 새로고침을 하면 toDos가 localStorage에는 남아 있지만 화면에는 나타나지 않는다.

이번에는 이를 해결해보도록 하자

 

먼저 array를 stringify 하는 방법이 있다.

array를 stringify 하는 방법

stringify를 확인하면 array이가 단순히 string으로 바뀐것을 볼 수 있는데, 우리는 값을 string으로 저장하고 싶을 때 이것을 많이 사용할 것이다.

 

또 다른 방법은, '[1,2,3,4]' 와 같은 단순한 string을 가지고 살아있는 JavaScript object 로 만들어줄 수 있다는 것이다.

JSON.parse 사용

이렇게 JSON.parse를 사용하여 string을 JavaScript가 이해할 수 있는 살아있는 array로 만들 수 있다. 

 

이번엔 이걸 복사해서

console창에서 localStorage에 있던 텍스트를 parse 할건데

사실 이건 localStorage에 있던 텍스트가 아니기 때문에 이렇게 직접 가지고 오는 것도 가능하다

보다시피 처음에 우리가 localStorage에 갖고 있던 것은 그냥 단순한 string이었는데,

단순 string

이 string을 JSON.parse 안에 넣으면 ['a', 'b', 'c'] 처럼 실제로 무언가를 할 수 있는 배열을 얻게 되는 것이다

 

이제 저 toDos를 가지고 와서 단순한 string을 살아있는 array로 변환해보자

가장 먼저 해야하는 것은 saveToDos 를 얻는 것이다.(greeing.js에서 savedUsername을 가져오는 것과 비슷함)

맨 마지막에 이렇게 코드를 작성하건데, 위에서 "todos"를 한번 더 쓰고 있으므로 이를 변수 TODOS_KEY 로 지정해줬다.

이제 js 코드에서 "todos"를 사용한 부분을 TODOS_KEY로 바꿔주면 된다.

변수 생성 후 코드 수정

 

이제 조건문을 사용하여 만약 savedToDos가 localStorage에 존재하면, localStorage에서 온 string을 가지고 JavaScript로 바꿔주는 역할을 하는 변수를 만들도록 작성한다.

이제 savedToDos와 pasedToDos를 console.log 해보자

페이지에서 확인해보면 savedToDos는 그냥 string이고 pasedToDos는 array인 것을 확인할 수 있다.

string과 array

또 JS를 이용하여 array에 있는 각각의 item에 대해 function을 실행할 수 있는데, 바로 forEach가 array에 있는 각각의 item에 대해서 실행해준다.

이제 sayHello() 함수를 만들고

parsedToDos 가 가지고 있는 각각의 item이 함수 sayHello() 실행하도록 해보았다.

새로고침 후 확인해보면 처음에 출력된 배열의 요소(item) 개수만큼 hello가 출력된 것을 확인할 수 있다.

하지만 이것은 array의 item들에 대해 한 개의 function만 실행할 수 있게 해줘서, 내가 어떤 item을 사용하고 있는지 모르면 쓸모가 없다.

즉, 함수가 3번 실행됐다는 것을 아는 것 보다 어떤 item이 처리되고 있는지 아는 것이 중요하다는 것이다.

 

submit eventListener가 event(argument)를 그냥 제공해 주는 것처럼 JS도 지금 처리되고 있는 item을 그냥 제공해 주기 때문에 코드를 이렇게 작성하면

페이지의 console 창에서 어떤 item이 사용되었는지 확인할 수 있다.

forEach() 를 사용하여 array의 각 item을 가지고 실행하는 걸 알게되었는데, forEach(sayHello("")) 처럼 코드를 작성하지 않아도 된다.

sayHello() 나 또 다른 function을 만드는 대신 sayHello() 함수의 인자인 item을 가지고 와서 사용할 수 있다.

화살표 함수 사용

​이렇게 다른 방식을 사용해도 결과는 똑같은 것을 확인할 수 있다.