todo list를 다시 코딩 해보려했지만 오류 잡는데 2시간은 소모한것같다 ..
더이상 안되겠어서
내가 오늘 배운것중에 기억해야할것만 기록해보자
오늘은 새로운 React Hook을 2개 배웠다
New Hooks
searchParams와 navigate!
먼저 searchParams
우리가 저번에 배웠던 useParams와 이름이 비슷하다 Params는 Parameters
searchParams 훅의 기능은 쿼리스트링 구조의 값을 가져올수 있는 hook이다.
여기 보이는 것처럼 우리가 원하는 값을 쿼리스트링화 해놓는다
useParams로 동적라우팅화 시켜놓은 투두리스트 글을 가져오기위해 쿼리스트링화하고
searchParams로 쿼리스트링화 한 값을 가져올것이다.
id는 투두리스트의 인덱스 title은 우리가적은 할일 isDone은 완료했는지 안했는지를 따지는것이다.
LocalStorage
setItem
이놈에 로컬스트리지 때문에 아직도 애먹는 중이다.
투두리스트의 배열을 로컬스토리지에 넣어 나만의 투두리스트를 저장하는 목적으로 LocalStorage를 이용한다.
우선적으로 LocalStorage에서 배열을 문자열화 해 넣는것을 setItem 코드로 적어보면
localStorage.setItem("todos",JSON.stringify(newTodos));setItem 으로 우리가 작성한 newTodos(새로운 투두리스트)를 todos의 이름으로 넣는다.
저장하는 단계이다.
요 단계이다
const newTodos = [...todos,{id:lastTodoId+1,title:newTodo, isDone:false},];이것은 우리가 배열을 문자열한 함수로 새로만든 todos를 배열에 합류시키는거라고 보면된다.
###getItem
getItem 은 우리가 LocalStorage에서 불러오는거다
getItem을 이용해 불러오는걸 localTodos 로 함수화 하고
불러온 locaTodos 를 다시 parse 한다
오늘은 요 세가지만 알아보자!
이번에 한 투두리스트는 웹구성과 함께 로컬스토리지이용
그리고 새로운 Hook들 기깔나는 완성본 정말 배울게 많은 코딩이였다
이건 두번은 한번 내가 다시 만들어보는거로하자
