1.todolist Form
자바스크립트는 위에서 밑으로 순서대로 진행하기때문에
todoInput.value를 실행하여도 미리 입력한 todoInput은 inputvalue에 저장되어있기때문에 삭제 되지 않는다
inputvalue=todoInput.value→ input의 현재 value를 새로운 변수에 복사하는 것이다.
todoInput.value="";→ input칸을 비운다는 뜻이지 삭제한다는 뜻이 아니다.
즉 ,todoInput.value="" 로 인해 inputvalue에는 아무런 영향이 없다.
2.JSOB stringify( )
JSON.stringify(XXXX) ->값을 string으로 저장 하고싶을때 많이 사용
array 나 javascript 의 어떤코드던 간에 string으로 만들어준다 (변수등을 문자열로 바꾼다)
localStorage 에는 문자열밖에 저장 할 수 없기 때문에
todos에 들어간 배열값을 문자열로 변경시켜줘야한다.
그때 사용 하는 기능 JSON stringify를 이용한다
위와같이 원래는 그냥 배열안에 값이 저장되는데 JSON.stringify를 이용하여 문자열 배열로 변경시켜준다
위 JSON.stringify를 사용하지않으면 새로고침 하였을때 todolist가 새로고침되어 사라지게 되는데
코드와같이 JSON.stringify로 감싸주게 되면 문자열형식으로 배열안에 저장되며 새로고침을 하여도 todolist가 계속 유지된다.
3.JSON.parse( )
JSON.parse() -> 단순한 string을 javascript object로 만들 수 있다
JSON.stringify() 로 만든 string 을
JSON.parse(JSON.stringify())하여 다시 javascript object(javascript가 이해할 수 있는) 로 만들 수 있다
이제 todolist를 삭제해 볼텐데
클릭한 요소에 랜덤한id를 부착하고 그 id와 동일하지 않을시 삭제 시키는 코드를 짜봤다
위와 같이 코드를 실행시키면 JSON.stringify도 적용되어 아이디와 함께 todos 배열에 저장된다.
하나 id를 지정하였고 클릭이벤트리스너를 넣어서 그 id에 값을 가지고 와서 삭제함수를 실행시킨다 한들 localstorage에 있는 값을 javascript에서는 읽을 수 없는 형태이기때문에
JSON.parse를 사용하여 string으로 저장된것을 javascript object로
변경시켜준다.
기존에 localstorage에 저장돼있는 배열을 parse를 사용하여 javascript object로 변환 시켜준다.
JSON.stringify와 JSON.parse를 비교해보면 값이 확실히 다르다.
4.filter()
array에서 뭔가를 삭제할때 실제로 삭제하는 것이 아닌 지우고싶은 item을 빼고 새 array를 만드는것이다
item을 지우는게 아니라 item을 제외하는 것이다
즉 , 예전 array는 계속 있고 지우고싶은 item을 제외하고 새 array를 만드는것이다.
!!!지우고싶은 item을 제외하는 것!!!
filter((item)=>item.id !==(XXX.id)를 실행시키게 되면 todos에는 item의 아이디 중 조회한 아이디의 값과 다른아이들로만 새로운 배열을 생성한다.
나도 아직 filter() 의 개념에 대해선 완전히 이해하지 못하였기때문에
추가적으로 복습이 필요하다.
총 결과물은
