배너 - useState의 이용

useState 사용법

 

const [상태 변수, 상태 변경 함수] = useState(초기값);

 

 

const Banner = () => {

  const [movie, setMovie] = useState([]);

  const [isClicked, setIsClicked] = useState(false);

 

 

1)   const [movie, setMovie] = useState([]);

 //특정 영화의 더 상세한 정보 가져오기 (비디오 정보도 포함)

    const { data: movieDetail } = await axios.get(`movie/${movieId}`, {

      params: { append_to_response: "videos" },

    });

    setMovie(movieDetail);

  };

-> movie의 상태를 movieDetail로 변경 

 

 

2)  const [isClicked, setIsClicked] = useState(false);

 

if (isClicked) {

    return (

      <>

        <Container>

          <HomeContainer>

            <Iframe

              src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`}

              width="640"

              height="360"

              frameborder="0"

              allow="autoplay; fullscreen"

            ></Iframe>

          </HomeContainer>

        </Container>

        <button onClick={() => setIsClicked(false)}>X</button>

      </>

    );

  } else {

    return (

      <header

        className="banner"

        style={{

          backgroundImage:

            'url("https://image.tmdb.org/t/p/original/${movie.backdrop.path}")',

          //위에 useState 부분에 설정함

          backgroundPositon: "top center",

          backgroundSize: "cover",

        }}

      >

        <div className="bannner__contents">

          <h1 className="banner__title">

            {movie.title || movie.name || movie.original_name}

          </h1>

          <div className="banner__buttons">

            {movie?.videos?.results[0]?.key && (

              //movie가 있어? 그러면 videos가 있어? 있으면 그 비디오 가져오고 play 버튼 생성

              <button

                className="banner__button play"

                onClick={() => setIsClicked(true)}

              >

                Play

              </button>

 

- if(isClicked) 뜻 : 클릭되어있을때 (!isClicked이면 클릭 안되어있을 때) 

-> 초기 isClicked : false 

-> 그러면 else- return() 이부분 실행 ->   onClick={() => setIsClicked(true)} 로 상태 변경

-> if(isClicked)실행  -> <button onClick={() => setIsClicked(false)}>X</button> 으로 상태 변경