[영화 검색 사이트] - 사용자가 클릭한 영화의 id는 어떻게 가져올까?

문제 상황

모달창을 클릭했을 때 영화 상세 정보를 보여주는 기능을 구현해야 했다

 

상세 정보를 보여주는 과정 중에서 내가 겪었던 어려웅은 다음과 같다

📌 클릭한 영화 정보의 id를 가져오는 방법

📌 클릭한 영화 정보의 id와 인기 영화 배열의 id가 일치하지 않는 상황

 

차근차근 문제를 해결해보자

 

 

해결 과정

📌 클릭한 영화 정보의 id를 가져오는 방법

closest() 이용하기

selectors에 일치하는 가장 가까운 조상 element 혹은 자기 자신을 찾을 수 있다

element.closest(selectors);

 

 

이전에 영화 카드 템플릿을 생성할 때

div 태그 'movie-card'에 id 속성을 할당해두었다

const cardTemplate = `
    <div class="movie-card" id=${movieId}>
      <div class="movie-image">
        <img src=${movieImage} alt="영화이미지" />
      </div>
      <div class="movie-card-body">
        <h2 class="movie-title">${movieTitle}</h2>
        <p class="movie-rating">평점: ${movieRating}</p>
      </div>
    </div>
    `;

 

사용자가 클릭한 영화에 담긴 데이터를 가져오는 로직을 다음과 같이 생각하였다

1. div 태그 'movid-card'를 선택하여 id 값을 가져온다

2. find 메서드를 이용해서 인기 영화 데이터 배열에 클릭한 영화의 id 값이 있는지 확인한다

3. 일치하는 id가 있으면 해당 영화의 데이터가 담긴 객체만 새로운 변수에 할당한다

 

[로직 1번에 해당하는 코드]

// 모달창 페이지 켜기
let movieCard;
const openModal = async function (event) {
  $modal.style.display = "block"; // 모달창 보이게 하기
  document.body.style.overflow = "hidden"; // 외부 화면 고정시키기
  
  movieCard = document.querySelector(".movie-card");
  if (!movieCard) return;
  
  const detailMovieInfo = await findDetailInfo(movieCard);
}

사용자가 클릭한 영화 카드의 id를 갖고 오기 위해서

맨 처음에는 querySelect을 이용해서 'movie-card'의 속성을 가져오려고 했었다

그랬더니 클릭한 영화 카드의 id가 아닌 맨 첫번째 영화 카드의 id가 가져와졌다

 

맨 첫번째 영화 카드의 id만 가져와 지다보니

모달창을 눌렀을 때 해당 영화 카드의 정보를 보여주는 것이 아니라

맨 첫번째 영화 카드의 정보만 나왔다

 

 

이럴 때 closest()를 이용해서 사용자가 클릭한 영화 카드의 id를 정확하게 가져오면 된다

그러면 모달창을 클릭했을 때 클릭한 영화 카드의 정보를 보여준다

movieCard = event.target.closest(".movie-card");

// 모달창 페이지 켜기
let movieCard;
const openModal = async function (event) {
  $modal.style.display = "block"; // 모달창 보이게 하기
  document.body.style.overflow = "hidden"; // 외부 화면 고정시키기
  
  movieCard = event.target.closest(".movie-card");
  if (!movieCard) return;
  
  const detailMovieInfo = await findDetailInfo(movieCard);
}

 

📌 클릭한 영화 정보의 id와 인기 영화 배열의 id가 일치하지 않는 상황

[로직 2, 3번에 해당하는 코드]

// 사용자가 클릭한 영화 상세 정보 가져오기
const findDetailInfo = async function (movieCard) {
  const clickedMovie = movieList.find((movie) => {
    return movie.id === movieCard.id;
  });
  return clickedMovie;
};

return movie.id === movieCard.id;

이 부분에서 true를 1개 반환해야 하는데 모두 false를 반환하는 상황이 일어났었다

 

혹시 몰라 moiveCard.id의 데이터 타입을 확인하였다

콘솔에 출력된 데이터 타입은 String이었다

movie.id의 데이터 타입은 Number이기 때문에 일치할 수가 없었던 것이다

 

 

movieCard.id를 Number 타입으로 바꿔주면 끝난다

return movie.id === Number(movieCard.id);

// 사용자가 클릭한 영화 상세 정보 가져오기
const findDetailInfo = async function (movieCard) {
  const clickedMovie = movieList.find((movie) => {
    return movie.id === Number(movieCard.id);
  });
  return clickedMovie;
};

 

 

결과

다음과 같은 문제를 해결하고

모달창에 상세 정보를 넣어주는 코드를 모두 구현하면,

영화 카드를 클릭했을 때 상세 정보를 보여주는 모달창이 뜨게 된다!