7.4 Loading To Dos (1)

gangmin·2021년 12월 25일
0

강의

로컬에 저장은 되지만, 화면에 출력되지 않는다. 이번 강의는 로컬에 저장된 데이터를 화면에 출력하는걸 해보자!


JSON.parse : 단순한 string ---> JS object

JSON.parse('[1,2,3,4]')
>> (4) [1, 2, 3, 4]0: 11: 22: 33: 4length: 4[[Prototype]]: ~~ 길어서 생략 ~~

string을 JS가 이해할 수 있는 즉, 살아있는 array로 만들었다.

localStorage.getItem("todos")
>>'["밥","청소","공부","운동"]'

처음 우리가 로컬에 갖고 있던건 그냥 단순한 string이다. 우리가 이 string을 JSON.parse 안에 넣으면, 실제로 무언가를 할 수 있는 배열을 얻게 되는거다.

  • 정리 : 로컬에서 key("todos")에 해당하는 string을 들고와서 JSON.parse()를 통해 array를 얻게 된다.

이제는 toDoForm.addEventListener("submit",handleToDoSubmit); 코드 밑에서 작성할거다.

const savedToDos = localStorage.getItem(TODOS_KEY); // 로컬에서 데이터를 가져온다.

물론 어떨때는 savedToDos가 null이 될때도 있다는것을 안다.

const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos); 
>> ["밥","청소","공부"] ---> 로컬에서 바로 가져오면 그냥 string

if(savedToDos !== null){ //(=savedToDos)
    const parsedToDos = JSON.parse(savedToDos);
    console.log(parsedToDos);
>> (3) ['밥', '청소', '공부'] ---> 로컬에서 가져온걸 JSON.parse() 실행하면 array 
	0: "밥"
	1: "청소"
	2: "공부"
	length: 3
	[[Prototype]]: Array(0)
	}

array(배열)는 실제로 굉장히 똑똑하다. JS에서 정말 중요한 Data Structure이다. 어레이에 있는 각각의 item에 대해 함수를 실행할 수 있다.

array는 forEach( ) 메서드를 가진다. 각각의 item들에 대해 함수를 실행해준다.

forEach( ) : array에 있는 각각의 item에 대해 함수를 실행할 수 있게 해준다!!

내가 어떤 item을 사용하고 있는지 모른다면 완전 무용지물이다. eventListener가 event에 대한 정보를 그냥 제공해주는 것처럼 JS는 지금 처리되고 있는 item 또한 그냥 제공해준다.

function sayHello(item){
    console.log("this is turn off",item);
>> this is turn off 밥
   this is turn off 청소
   this is turn off 공부
}  

const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos);
if(savedToDos !== null){ //(savedToDos)
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello);
}

이런 식으로 출력된다.


arrow function

arrow function

sayHello 함수를 따로 생성하는것 말고도 더 간단한 방법이 있다. (간단할때만 사용)

parsedToDos.forEach((item) => console.log("this is turn off",item));

이렇게 적는게 함수를 작성할때 더 짧게 쓰는 방법이다. "function"을 작성할 필요도 없고 함수 이름도 안지어줘도 된다.


정리

ls에 array로 저장이 안되기 때문에 JSON.stringify로 string으로 변환 후, ls에 저장을 한다. ls에서 데이터를 꺼내오려면 JSON.parse를 이용해 string을 다시 array로 바꿔서 꺼내온다. array로 다시 변환해주는 이유는 array.foreach를 활용해 array를 for 반복문 없이 item 하나씩 function에 넣어 어떤 작업을 해줄거기 때문이다.

0개의 댓글