Inflearn Community Q&A
asked
추가 기능
Written on
·
158
2
완강 후에 혼자 추가 기능을 구현해보고 있는데 질문 드려도 될까요?!
하트를 클릭하고 재클릭했을 때, favorites에서 해당 이미지를 제외시키는 기능을 구현하려고 합니다.(하트 누를 때마다 추가되었다가 삭제되었다가 ..)
그래서 저는 handleHeartClick()에 if(alreadyFavorite)의 경우를 추가해서 favorites 목록에서 해당 이미지를 제외하고, 로컬스토리지에서도 데이터를 삭제하려고 했습니다.
그런데 실행시켜보니 favorites 목록에서는 지워졌는데 로컬스토리지 데이터는 삭제가 안됩니다ㅠ 어떻게 구현해야 할지 모르겠어서 질문 드립니다..!!
밑에는 제가 짠 코드입니다.
function handleHeartClick() {
if (alreadyFavorite) {
const nextFavorites = favorites.filter(favorite => favorite != mainCat);
setFavorites(nextFavorites);
jsonLocalStorage.removeItem(mainCat);
return;
}
const nextFavorites = [...favorites, mainCat];
setFavorites(nextFavorites);
jsonLocalStorage.setItem('favorites', nextFavorites)
};
reactjavascript
Answer 1
2
jayjinjay
Instructor
jsonLocalStorage.removeItem(mainCat);
은 로컬스토리지에서 mainCat 키값을 찾아 해당하는 value를 지우는 코드입니다.
예를 들어 mainCat변수가 "1.png" 라면 로컬스토리지에서 키가 "1.png"인 값을 찾아서 지우는거죠.
우리는 고양이 이미지를 'favorites'라는 키값에 value를 배열로 저장했었어요.
동일하게 setItem을 해주면 됩니다. nextFavorites 계산은 완벽해요~ ㅎㅎ (!= 연산만 !== 로 비교하면 더 좋겠네요. 동일 타입의 비교니까요)
const nextFavorites = favorites.filter(favorite => favorite !== mainCat);
setFavorites(nextFavorites);
jsonLocalStorage.setItem('favorites', nextFavorites)
감사합니다! 고양이 이미지 하나하나를 키:밸류 로 저장한게 아니라 favorites 통째로 저장해서 그렇다는 말씀이신거죠??