[개인프로젝트] 상세 영화 정보 모달 만들기(1)

영화 상세 정보 모달 생성

Row 컴포넌트 내에서 영화를 클릭하면 해당 영화의 상세정보 페이지를 모달로 노출시키고자 한다. 이를 위해, 첫번째로 Row 컴포넌트에서 해야할 작업(state, event handler)과 두번째, Row 컴포넌트에서 props로 전달 받은 영화 정보를 토대로 모달 컴포넌트의 구조를 작성 해야하는지 살펴보겠다.

Row 컴포넌트 사전 작업

• State 생성
  1. 모달 활성화 유무를 나타내는 state를 준비한다.

     const [modalOpen, setModalOpen] = useState(false);

  2. 모달 활성화 state가 변경되면, 모달 컴포넌트에 props로 전달 할 상세 영화 정보 state를 준비한다. 이때, 콘솔로 확인하여 사용할 수 있는 속성들이 무엇이 있는지 확인해야한다.
  • backdrop_path, title, overview, name?, release_date?, first_air_date, vote_average 속성을 사용할 것이다.

    const [movieSelected, setMovieSelected] = useState({});

    
• Click Event Handler
  1. RowPosters 디자인 컴포넌트의 img El에서 movieSelected state에 담을 영화 정보는 가지고 있으므로, handler를 img el에 적용시킨다.
  2. 해당 이벤트 헨들러는 img El 에 클릭 이벤트가 발생하면, 모달 컴포넌트를 활성화 시키고, 클릭 이벤트가 발생한 img el 의 상세 영화 정보를 state로 관리 시키는 기능을 담당한다.

     // src > components > Row.js
     const [modalOpen, setModalOpen] = useState(false);
     const [movieSelected, setMovieSelected] = useState({});
     ...
     const ModalhadleClick = (movie) => {
       setModalOpen(true);
       setMovieSelected(movie);
       console.log("handledMovie", movie);
     };
     ...
     ...
     <RowPosters id={id}>
           {movies.map((movie) => (
             <img
               key={movie.id}
               className="row__poster"
               src={`https://image.tmdb.org/t/p/original/
                    ${movie.backdrop_path}`}
               alt={movie.name}
               onClick={() => ModalhadleClick(movie)}
             />
           ))}
     </RowPosters>
     	```

MovieModal 컴포넌트로 Props 전달하기

1. row컴포넌트 내에 img el를 클릭 했을 때, 다음과 같은 과정이 수행된다.
   1) onClick 이벤트 발생하면서, movie state를 인자로 전달받은 ModalhadleClick 함수가 호출된다.
   2) ModalhadleClick 함수가 호출되면서, 다음 두 개의 state를 변경시킨다.

   • setModalOpen(true);
   • setMovieSelected(movie);

   3) modalOpen state가 true일 때, MovieModal 컴포넌트가 마운팅 되도록 설정한다.

   {modalOpen && ( <MovieModal />)}

   4) MovieModal 컴포넌트에 필요한 아래 두가지 props를 전달한다.

   • 모달을 비활성화 할 것을 감안하여, setModalOpen를 props로 전달한다.
   • 모달에서 사용할 movieSelected의 속성을 사용하기 위해, movieSelected의 속성들을 전개연산자를 사용하여 Props로 전달한다.
     backdrop_path, title, overview, name?, release_date?, first_air_date, vote_average 속성을 사용할 계획인다.

       {modalOpen && (
         <MovieModal setModalOpen={setModalOpen} {...movieSelected} />
       )}

MovieModal 컴포넌트 구조

 import React from "react";
 import { ModalContent, ModalWrapper, Presentation } from "./MovieModal.styled";

 const MovieModal = ({
   backdrop_path,
   title,
   overview,
   name,
   release_date,
   first_air_date,
   vote_average,
   setModalOpen,
 }) => {
   return (
     <Presentation role="presentation">
       <ModalWrapper>
         <div className="modal">
           <span className="modal__close" onClick={() => setModalOpen(false)}>
             X
           </span>

           <img
             className="modal__poster-img"
             src={`https://image.tmdb.org/t/p/original/${backdrop_path}`}
             alt="modal-img"
           />

           <ModalContent>
             <p className="modal__details">
               <span className="modal__user_perc">100% for you</span>{" "}
               {/* 개봉일자 혹은 첫 상영일자 */}
               {release_date ? release_date : first_air_date}
             </p>

             <h2 className="modal__title">{title ? title : name}</h2>
             <p className="modal__overview">평점: {vote_average}</p>
             <p className="modal__overview">{overview}</p>
           </ModalContent>
         </div>
       </ModalWrapper>
     </Presentation>
   );
 };

 export default MovieModal;