로컬 스토리지에 my list 저장하기

컴포넌트를 로드할 때 localStorage.getItem을 이용하여 저장된 목록을 불러옵니다.

 

  // 로컬에 my list 저장

  useEffect(() => {

    const savedList = JSON.parse(localStorage.getItem("myList"));

    if (savedList) {

      setMyList(savedList);

    }

  }, []);

 

myList를 업데이트 할 때마다 localStorage.setItem을 이용하여 목록을 저장합니다.

 

  useEffect(() => {

    localStorage.setItem("myList", JSON.stringify(myList));

  }, [myList]);

 

전체 노래 목록에서 삭제를 하면 myList에서도 삭제되도록 합니다.

 

  const handleClickMinusIcon = (e, song) => {

    e.stopPropagation();

    if (isClickedMyList) {

      const copiedMyList = [...myList];

      copiedMyList.splice(copiedMyList.indexOf(song), 1);

      setMyList([...copiedMyList]);

      return;

    }

    const removeItem = myList.find((item) => item.id === song.id);

    const copiedMyList = [...myList];

    copiedMyList.splice(copiedMyList.indexOf(removeItem), 1);

    setMyList([...copiedMyList]);

  };