⭐상세 정보 모달창 띄우기

🪐MovieModal/index.js

🌠소스 코드

먼저 모달창을 구성하는 component이다.

import React from 'react'
import './MovieModal.css'
export default function MovieModal({
  backdrop_path,
  title,
  overview,
  name,
  release_date,
  first_air_date,
  vote_average,
  setModalOpen
}) {
  return (
    <div className='presentation' role='presentation'>
      <div className='wrapper-modal'>
        <div className='modal'>
          <span
            onClick={() => setModalOpen(false)}
            className='modal-close'>
            X
          </span>

          <img
            className='modal__poster-img'
            src={`https://image.tmdb.org/t/p/original/${backdrop_path}`}
            alt='modal__poster-img' />
          <div className='modal__content'>
            <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>
          </div>
        </div>
      </div>
    </div>
  )
}

부모 컴포넌트로부터 props를 받아서 사용한다. UI 작성은 위 소스코드처럼 구성한다.

🌠setModalOpen

부모 컴포넌트로부터 받아온 props 중에 부모 컴포넌트의 modalOpen state를 변경할 수 있는 setModalOpen 함수도 있다. 사용자가 닫기 버튼을 클릭하면은 setModalOpen을 통해 state를 false로 만들어서 창을 닫는다.

modalOpen은 state이기 때문에 값이 index.js에서 값이 변경되었더라도 해당 state를 참조하는 모든 component와 그 하위 컴포넌트들이 리렌더링이 되기 때문에 화면을 닫을 수 있다.

🪐Row.js

</div>  
      {
        modalOpen && <MovieModal {...movieSelected} setModalOpen={setModalOpen}/>
      }
</section>

기존 소스 코드에서 마지막에 section 태그를 닫기 직전에 모달창을 구성하는 소스코드이다.

modalOpen이 false이면 short-circuit 덕에 뒤에 컴포넌트는 렌더링되지 않지만 true이면 렌더링 된다.

props로는 movieSelected와 setModalOpen()을 넘겨준다. movieSelected에는 선택된 영화에 대한 정보가 있으면 전개연산자로 props를 넣어주는 이유는 기존에는 각각의 property들을 하나 하나 기입해줘야했지만 전개연산자로 props를 넘겨주면, 해당 property의 이름으로 간단하게 자식 컴포넌트가 props를 받아서 쓸 수 있다. 기존에는 property들을 하나 하나 인자명을 지정해서 넣어주었음을 명심하자.

⭐현재까지 사용된 css

🪐가상 클래스(:)

가상 클래스(pseudo-class)는 CSS에서 요소의 특정 상태나 상황에 따라 스타일을 적용하기 위해 사용되는 선택자입니다. 가상 클래스는 선택된 요소의 특정 상태를 지정하고 해당 상태에 따른 스타일을 정의할 수 있습니다.
가상 클래스는 선택자 뒤에 콜론(:)을 사용하여 표시됩니다. 가상 클래스는 일반적으로 사용자 상호작용, 링크 상태, 요소의 위치 등과 관련된 다양한 상태에 따라 스타일을 지정할 때 사용됩니다.
-chatGPT

.banner__buttons {
    display: flex;
    flex-direction: row;
}
.banner__button:hover {
    color: #000;
    background-color: rgba(170, 170, 170, 0.9);
    transition: all 0.2s;
}

기존 banner__buttons 스타일에다가 만약에 버튼에 마우스 포인터가 올라가 있다면 새로운 스타일(가상 스타일)을 적용하는 css 코드이다.
: 는 가상 선택자로써 특정 상황에 특정 스타일을 지정하기 위해 사용된다.

🪐@규칙(at-rule)

🌠@media

CSS2에서는 @media 규칙을 통해 서로 다른 미디어 타입(media type)을 위한 맞춤식 스타일 시트를 지원합니다.
-TCP School

@media (max-width: 768px) {
    .banner__contents {
        width: min-content !important;
        padding-left: 2.3rem;
        margin-left: 0px !important;
    }

    .banner__description {
        font-size: 0.8rem !important;
        width: auto !important;
    }

    .info {
        text-align: start;
        padding-right: 1.2rem;
    }

    .space {
        margin-left: 6px;
    }

    .banner__button {
        font-size: 0.8rem !important;
        border-radius: 4px !important;
    }
}

쉽게 말해서 if문이다. 괄호 안의 조건이 만족한다면 안에 코드가 적용되고 만족하지 않는다면 적용되지 않는다. 위 예제는 화면 너비가 768px 이하가 규칙이다.

🌠@import

@import 규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙입니다.
이 규칙은 스타일 시트에 사용되는 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시되어야 합니다.
-TCP School