리액트 첫주차 개인 과제를 완료하고 오늘 아침 실행시켰는데 갑자기 실행이 안되는 문제가 발생했다.
문제가 되는 부분은 아래와 같다
if (todoList.length === 0) { // 이 조건에서 length 사용할 수 없는 에러가 발생한다.
const dommy = [
{
id: 1,
title: "리액트 공부하기",
desc: "리액트 심화를 공부해봅시다.",
done: false,
},
{
id: 2,
title: "리액트 공부하기",
desc: "리액트 기초를 공부해봅시다.",
done: true,
},
];
setTodoList(dommy);
}
로컬 스토리지에 아무런 값이 없을 때에는 더미데이터를 넣어주는 로직을 구현하고 싶었다.
todoList를 기준으로 useEffect를 사용하여 바로바로 로컬스토리지에 set되게 만들었다.
그러나 분명히 어제 저녁에 다 실행되는 것을 확인하고 마무리 했는데 갑자기 문제되는 것이 이상했다.
그래서 먼저 todoList를 찍어보았다.
결과는 null이 나왔다.
.
.
????
.
.
분명히 어제는 길이로 0이 나왔는데 갑자기 null이 나왔다.
일단 조건을 (!todoList) 이렇게 바꾸었더니 정상 작동한다.
그래서 내용을 추가하고 삭제하여 다시 로컬스토리지를 비워보았다.
그랬더니 더미데이터가 생성되지 않는다.
다시 todoList를 콘솔로 찍어보니 빈배열이 나온다.
즉, 나는 브라우저를 재실행 했기 때문에 LocalStorage에 없는 값을 get하게 된 것이고,
null을 가져오게 되는 것이다.
그러나 한번이라도 생성되었다면 지우더라도 state를 사용하여 빈배열을 주기 때문에 기존 key값과 빈배열이 남게된다.
if (!todoList || todoList.length === 0) { // or 조건을 설정해주었다.
const dommy = [
{
id: 1,
title: "리액트 공부하기",
desc: "리액트 심화를 공부해봅시다.",
done: false,
},
{
id: 2,
title: "리액트 공부하기",
desc: "리액트 기초를 공부해봅시다.",
done: true,
},
];
setTodoList(dommy);
}위와같이 조건을 변경해서 문제를 해결했다.
기존에는 localStorage에 remove메서드를 사용해서 데이터를 삭제했는데, 리액트를 사용하면서 remove메서드 없이 제외된 배열을 넣어줌으로써 빈배열이 남는다는 것을 알게 되었다.
끝날때까지 끝난게 아니다ㅋㅋㅋ
