7. 영화 출연진들 가져오기 - 영화사이트 만들기

영화에 나오는 Crews Information 가져와서 화면에 보이기

1.crew정보를 state값에 넣기(MovieDetailPage.js)

const [Casts, setCasts] = useState([]);

2.fetch통신을 통하여 cast정보받기(MovieDetailPage.js)

let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}`;
let endpointInfo = `${API_URL}movie/${movieId}?api_key=${API_KEY}`;

useEffect(() => {
    let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}`;
    let endpointInfo = `${API_URL}movie/${movieId}?api_key=${API_KEY}`;

    fetch(endpointInfo)
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        setMovie(response);
      });

    fetch(endpointCrew)
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        setCasts(response.cast);
      });
  }, []);

3. State값들을 GridCard.js에 넘기기(MovieDetailPage.js)

{/* Actors Grid*/}
        <div
          style={{ display: 'flex', justifyContent: 'center', margin: '2rem' }}
        >
          <button onClick={toggleActorView}> Toggle Actor View</button>
        </div>
        {ActorToggle && (
          <Row gutter={[16, 16]}>
            {/*gutter는 Col간의 위 아래여백을 줄때 사용 */}
            {Casts &&
              Casts.map((cast, index) => (
                <React.Fragment key={index}>
                  <GridCards
                    image={
                      cast.profile_path
                        ? `${IMAGE_BASE_URL}w500/${cast.profile_path}`
                        : null
                    }
                    characterName={cast.name}
                  />
                </React.Fragment>
              ))}
          </Row>
        )}
      </div>

*단, 여기서 landingPage.js에서 보내는 GridCards와 구분짓기위해 LandingPage.js에서 보낼때는 landingPage={true}를 넣어준다.

<GridCards 
	landingPage={true}
    		image={movie.poster_path ? `${IMAGE_BASE_URL}w500/${movie.poster_path}` : null}
                  movieName={movie.original_title}
                  movieId={movie.id}
                />
                  ...이하생략

4.GridCard.js 에서 props값에 맞게 다시코딩하기(MovieDetailPage.js에서 갈때와 LandigPage.js에서 갈때의 두가지 경우 나누기)

import React from 'react';
import { Col } from 'antd';

function GridCards(props) {
  if (props.landingPage) {
    return (
      <Col lg={6} md={8} xs={24}>
        {/*브라우저의 크기가 가장클때는 24중에 6만쓰겠다는의미 중간은 8 가장작을때는 24를 다쓰겠다는의미*/}

        <div style={{ position: 'relative' }}>
          <a href={`/movie/${props.movieId}`}>
            <img
              style={{ width: '100%', height: '320px' }}
              src={props.image}
              alt={props.movieName}
            />
          </a>
        </div>
      </Col>
    );
  } else {
    return (
      <Col lg={6} md={8} xs={24}>
        {/*브라우저의 크기가 가장클때는 24중에 6만쓰겠다는의미 중간은 8 가장작을때는 24를 다쓰겠다는의미*/}

        <div style={{ position: 'relative' }}>
          <img
            style={{ width: '100%', height: '320px' }}
            src={props.image}
            alt={props.characterName}
          />
          <div
            style={{
              position: 'absolute',
              right: '5px',
              bottom: '5px',
              color: 'white',
              fontWeight: 'bold',
            }}
          >
            {props.image ? props.characterName : null}
          </div>
        </div>
      </Col>
    );
  }
}

export default GridCards;

5. Toggle Actor View 버튼을 토글로 만들기(MovieDetailPage.js) - 버튼을 토글로 만드는 API이기때문에 알아두면 좋다.

1.state값지정

const [ActorToggle, setActorToggle] = useState(false);

2.button에 onclick함수 지정

<button onClick={toggleActorView}> Toggle Actor View</button>

3.onclick함수(toggleActorView)만들기

 const toggleActorView = () => {
    setActorToggle(!ActorToggle);
  };

4.state값이 true일때만 화면 나오게 적용

{ActorToggle && (
          <Row gutter={[16, 16]}>
            {/*gutter는 Col간의 위 아래여백을 줄때 사용 */}
            {Casts &&
              Casts.map((cast, index) => (
                <React.Fragment key={index}>
                  <GridCards
                    image={
                      cast.profile_path
                        ? `${IMAGE_BASE_URL}w500/${cast.profile_path}`
                        : null
                    }
                    characterName={cast.name}
                  />
                </React.Fragment>
              ))}
          </Row>
        )}

*{ActorToggle && ~~ } 사용법 유심히보기(React에서는 굉장히 많이쓴다.)

 

MovieDetailPage.js전체코드

import React, { useEffect, useState } from 'react';
import { API_KEY, API_URL, IMAGE_BASE_URL } from '../../Config';
import MainImage from '../LandingPage/Sections/MainImage';
import MovieInfo from '../MovieDetailPage/Sections/MovieInfo';
import GridCards from '../commons/GridCards';
import { Row } from 'antd';

function MovieDetailPage(props) {
  console.log(props.match);
  let movieId = props.match.params.movieId;

  const [Movie, setMovie] = useState({});
  const [Casts, setCasts] = useState([]);
  const [ActorToggle, setActorToggle] = useState(false);

  useEffect(() => {
    let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}`;
    let endpointInfo = `${API_URL}movie/${movieId}?api_key=${API_KEY}`;

    fetch(endpointInfo)
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        setMovie(response);
      });

    fetch(endpointCrew)
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        setCasts(response.cast);
      });
  }, []);

  const toggleActorView = () => {
    setActorToggle(!ActorToggle);
  };
  return (
    <div>
      {/* Header*/}
      {Movie.backdrop_path && ( //Movie안의 backdrop_path를 가져오는데
        //시간이 오래걸릴 수도있기때문에 근데 가져오는 도중에 렌더링을 할려고하여 오류가발생한다.
        //이를 방지하기위한 코드(실제 콘솔에 이를안해주면 undefined라고 오류발생)
        <MainImage
          image={`${IMAGE_BASE_URL}w1280/${Movie.backdrop_path}`} //영화이미지
          title={Movie.original_title} //영화제목
          text={Movie.overview} //영화에대한설명
        />
      )}

      {/* Body*/}
      <div style={{ width: '85%', margin: '1rem auto' }}>
        {/* Movie Info*/}

        <MovieInfo movie={Movie} />

        <br />
        {/* Actors Grid*/}
        <div
          style={{ display: 'flex', justifyContent: 'center', margin: '2rem' }}
        >
          <button onClick={toggleActorView}> Toggle Actor View</button>
        </div>
        {ActorToggle && (
          <Row gutter={[16, 16]}>
            {/*gutter는 Col간의 위 아래여백을 줄때 사용 */}
            {Casts &&
              Casts.map((cast, index) => (
                <React.Fragment key={index}>
                  <GridCards
                    image={
                      cast.profile_path
                        ? `${IMAGE_BASE_URL}w500/${cast.profile_path}`
                        : null
                    }
                    characterName={cast.name}
                  />
                </React.Fragment>
              ))}
          </Row>
        )}
      </div>
    </div>
  );
}

export default MovieDetailPage;

 

실행결과

 

 

동영상강의