[영화 검색 사이트] - 어떻게 북마크 추가 버튼을 삭제 버튼으로 바꿀까?
문제 상황
사용자가 북마크 추가 버튼을 눌렀을 때
Local storage에 해당 영화 정보를 저장하는데까지는 구현하였다
북마크로 들어가는 버튼을 눌렀을 때 추가한 영화 카드만 나왔다
문제는 추가한 영화 카드의 모달창에 들어갔을 때 발생하였다
북마크에 추가된 영화 카드의 버튼은 '북마크 추가'가 아닌 '북마크 삭제'로 바뀌어야 한다
'북마크 삭제'로 바꾸는 과정에서 겪었던 어려움을 차근차근 설명해보겠다
문제 원인
'북마크 삭제' 버튼으로 바꾸기 위해 내가 작성한 코드는 2가지가 있었다
01 사용자가 북마크로 이동하는 버튼을 누른 것을 인지했을 때 '북마크 삭제' 버튼으로 바꾸기
1) addEventListener로 사용자가 북마크로 이동하는 버튼을 눌렀을 때를 인지한다
2) addEventListener에서 실행하는 콜백 함수 내에서 북마크 버튼의 HTML 요소를 '삭제' 버튼으로 바꾼다
결과: 북마크 이동 버튼을 눌러도 북마크 추가 버튼이 그대로 남아있다
02 사용자가 북마크로 이동하는 버튼을 눌렀을 때 true값을 반환하기
1) addEventListener로 사용자가 북마크로 이동하는 버튼을 눌렀을 때를 인지한다
2) addEventListener에서 실행하는 콜백 함수 내에서 true 값을 반환하다
3) 값이 true이면 삭제 버튼으로 바꾸고 값이 false이면 추가 버튼으로 유지한다
결과: 원래 잘 기능하던 동작도 이상하게 엉켜버리는 일이 발생했다
2개의 코드 모두 사용자가 북마크 이동 버튼을 눌렀을 때 어떤 동작이 발생한다
즉, 사용자가 다시 메인 페이지로 왔을 때에는 북마크에 추가한 영화 카드의 버튼이 초기화 되는 문제가 발생한다
해결 과정
오전 시간 내내 고민해봐도 모르겠어서 튜터님께 도움을 요청하러 갔다
튜터님께서 주신 힌트는 'Local Storage의 데이터 여부'와 '북마크에 추가된 영화의 id 여부'를 확인하는 것이었다
말로 풀어서 설명하면 다음과 같다
1. Local Storage에 저장된 데이터가 있는지 확인한다
2-1. 데이터가 있으면, 사용자가 클릭한 영화의 id와 Local Storage에 저장된 영화의 id가 일치하는지 확인한다
a. 2개의 id가 일치하면, 북마크 삭제 버튼을 넣어준다
b. 2개의 id가 일치하지 않으면, 북마크 추가 버튼을 넣어준다
2-2. 데이터가 없으면, 북마크 추가 버튼을 넣어준다
말로 풀어서 들었을 때는 코드를 짜는 것이 쉬워 보였는데
막상 직접 코드를 짜보니 쉽지만은 않았다
일단 2개의 함수를 만들었다
📌 Local Storage 데이터 여부와 id 일치 여부를 확인하는 함수, checkLocalStorage
📌 checkLocalStorage의 값에 따라 북마크 추가 버튼 혹은 북마크 삭제 버튼을 넣는 함수, changeBookMarkButton
어떤 식으로 코드를 짰는지 차근 차근 설명해보겠다
📌 Local Storage 데이터 여부와 id 일치 여부를 확인하는 함수
const checkLocalStorage = function (movieId) {
if (window.localStorage.length >= 1) {
const strMovieArr = window.localStorage.getItem("movie");
const markedMovie = JSON.parse(strMovieArr);
return markedMovie.some((movie) => movie.id === movieId);
} else {
false;
}
};함수 외부에서 클릭된 영화의 id를 매개 변수로 받는다
if (window.localStorage.length >= 1)
먼저 Local Storage의 길이를 확인하여, 저장된 데이터가 없을 때 false 값을 반환한다
const strMovieArr = window.localStorage.getItem("movie");
const markedMovie = JSON.parse(strMovieArr);
return markedMovie.some((movie) => movie.id === movieId);
저장된 데이터가 있다면, 배열의 형태로 저장해둔 영화 정보를 가져온다
some 메서드를 통해 클릭한 영화의 id와 북마크의 저장된 영화의 id 중 하나라도 일치한다면 true를 반환하게 한다
📌 checkLocalStorage의 값에 따라 북마크 추가 버튼 혹은 북마크 삭제 버튼을 넣는 함수
const changeBookMarkButton = function (movieId) {
const addButton = `
<input class="movie-add-button" type="button" value="북마크 추가" />
`;
const minusButton = `
<input class="movie-minus-button" type="button" value="북마크 삭제" />
`;
if (checkLocalStorage(movieId)) {
$bookMarkButton.innerHTML = minusButton;
} else {
$bookMarkButton.innerHTML = addButton;
}
};함수 외부에서 클릭된 영화의 id를 매개 변수로 받는다
if (checkLocalStorage(movieId)) {
$bookMarkButton.innerHTML = minusButton;
} else {
$bookMarkButton.innerHTML = addButton;
}
클릭된 영화의 id가 Local storage에 있는 영화의 id가 일치할 경우(checkLocalStroage === true)
'북마크 삭제' 버튼을 넣어준다
그외의 나머지 상황에는 '북마크 추가' 버튼을 넣어준다
changeBookMarkButton 함수는 모달창을 열 때 사용하는 콜백 함수 내부에 넣어주면 된다
결과
다음과 같이 코드를 짜주면
북마크 추가/삭제 버튼이 잘 작동하는 것을 확인할 수 있다
이제 추가 버튼을 눌렀을 때 추가 기능이, 삭제 버튼을 눌렀을 때 삭제 기능이 작동하도록 만들어 보자..~
