[TIL]20230615 - localstorage로 투두리스트 데이터 값 유지

지난번 팀과제 진행시에 댓글등록 기능을 구현하기 위해 localstorage를 사용하는 팀들도 있었다.

하지만 우리팀은 mongoDB를 이용했기에 사용하지 않았었는데 이번 과제로 localstorage를 하용해야해서

개인과제에 + 기능 구현으로 localstorage를 이용해서 새로고침시에도 화면에 남아 있을수 있도록 구현했다.

기본 사용법은 지난번 글에!

 

localstorage 기본 사용법

https://newheee.tistory.com/27

 

사용하는 건 생각보다 어렵진 않았다!

 

localstorage 데이터 저장하기

 

const clickAddTask = () => {

        const addTaskList = {

            id: randomID(),

            title,

            text,

            isDone: false

        };

        const newArr = [...task, addTaskList];

        setTask(newArr);

        localStorage.setItem('todoItems', JSON.stringify(newArr));

        setTitle('');

        setText('');

    };

 

 

localstorage 데이터 불러오기 

 

const localData = localStorage.getItem('todoItems');

setTask(JSON.parse(localData));

 

그런데 데이터가 안뜨고 계속 오류가 나더라니...

그래서 구글링을 하다가 useEfeect를 사용해봤다

 

const [task, setTask] = useState([

        {

            id: 0,

            title: '리액트 과제',

            text: '리액트 todo list 만들기',

            isDone: false

        }

    ]);

    useEffect(() => {

        const localData = localStorage.getItem('todoItems');

        if (localData !== null) {

            setTask(JSON.parse(localData));

        } else {

            setTask(task);

        }

    }, []);

 

잘 불러와짐!!

 

localstorage 데이터 수정/삭제하기

 

처음엔 당연히 삭제니까 removeItem을 써야지 하고 썻더니

todoItems의 전체 데이터가 다 삭제되어 버렸다!

당황쓰 ㅎㅎㅎㅎㅎㅎ

생각없이 코드 때려박기!!!

ㅋㅋㅋㅋㅋㅋㅋㅋ

localStorage.removeItem("key");

키값으로 데이터를 찾아 삭제하는데 나는 todoItems라는 키값에 객체배열을 넣고 있었는데

키값으로 삭제하니 전부가 삭제되는것ㅎㅎㅎ

그래서 filter로 선택한 객체의 아이디만 빼고 리턴받아서 다시 setItem으로 객체배열을 다시 저장했더니 

나머지값들은 유지되고 선택된값은 삭제되었다!

 const clickDelete = (id) => {

        const newTask = task.filter((task) => {

            return task.id !== id;

        });

        setTask(newTask);

        localStorage.setItem('todoItems', JSON.stringify(newTask));

    };

    const clickCompleteToggle = (id) => {

        const newArr = task.map((item) => (item.id === id ? { ...item, isDone: !item.isDone } : item));

        setTask(newArr);

        localStorage.setItem('todoItems', JSON.stringify(newArr));

    };