[클론코딩] 무비앱 시리즈 #7

#7 Movie Detail 페이지 만들기

 

영화 포스터를 클릭하면 영화 정보와 배우들의 이미지가 나오는 페이지를 만들 것이다

#7에서는 영화 정보까지만!

 

1. 필요한 폴더, 파일 생성

views 폴더 안에 MovieDetail이라는 폴더를 만들어주고, 그 안에 MovieDetail.js 파일을 생성해준다

rfce를 타이핑 하여 간단한 함수 형태를 만들어준다

 

 

2. 렌더링

어떤 형식으로 영화에 대한 정보를 출력할 것인지 렌더링을 해준다

이 때 Image(배우 사진)를 어떻게 출력할지에 대한 템플릿도 필요하기 때문에 전에 작성했던 MainImage를 가져와준다

import MainImage from '../LandingPage/Sections/MainImage'

그 다음 렌더링

  return (
    <div>
      {/*header*/}

      <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*/}



        <br />
        
        {/*Actors Grid*/}
        <div style={ {display:'flex', justifyContent:'center', margin:'2rem'} }>
          <button >Toggle Actor View</button>
        </div>


      </div>
    </div>
  )

일단 이렇게 작성한다

 

 

3. API로 영화 정보 가져오기

useEffect함수로 렌더링 될 때 어떤 작업을 할 것인지 작성한다

그 전에 영화 정보를 알려면 movieId가 필요하므로 가져와준다

  let movieId = props.match.params.movieId // movieId를 가져옴

console.log(props.match)로 찍어보면

props.match

저기에 params가 나오는데 저기서 movieId를 가져올 수 있다

 

전에는 endpoint를 하나만 만들었다

지금은 영화배우들과 영화 정보를 받아와야 하므로 endpoint를 각각 생성해준다

let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}` // 영화 배우
let endpointInfo = `${API_URL}movie/${movieId}?api_key=${API_KEY}` // 영화 정보

API를 사용하므로

import {API_KEY, API_URL, IMAGE_BASE_URL} from '../../Config'

해주는 건 필수

 

console.log(endpointInfo)로

endpointInfo

영화 정보가 가져와진 것을 확인한다

 

 

4. MovieInfo 템플릿 작성

MovieDetail 폴더 안에 Section 폴더를 생성, 그 안에 MovieInfo.js 파일을 생성해준다

그 다음 rfce를 타이핑하여 함수 형태를 만들어 주고

다른 건 다 ant design에서 가져온 코드 복붙

import React from 'react'
import {Descriptions, Badge} from 'antd';

function MovieInfo(props) {

  let {movie}=props;

  return (
      <Descriptions title="Movie Info" bordered>
        <Descriptions.Item label="Title">{movie.original_title}</Descriptions.Item>
        <Descriptions.Item label="relaese_date">{movie.release_date}</Descriptions.Item>
        <Descriptions.Item label="revenue">{movie.revenue}</Descriptions.Item>
        <Descriptions.Item label="runtime">{movie.runtime}</Descriptions.Item>
        <Descriptions.Item label="vote_average" span={2}>
          {movie.vote_average}
        </Descriptions.Item>
        <Descriptions.Item label="vote_count">{movie.vote_count}</Descriptions.Item>
        <Descriptions.Item label="status">{movie.status}</Descriptions.Item>
        <Descriptions.Item label="popularity">{movie.popularity}</Descriptions.Item>
      </Descriptions>
  )
}

export default MovieInfo

props로 가져옴

다시 MovieDetail.js 파일로 와서 방금 만든 MovieInfo.js을 import해준다

import MovieInfo from './Sections/MovieInfo'

그리고 아까 렌더링했던 곳으로 가서 MovieInfo 추가

  return (
    <div>
      {/*header*/}

      <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 >Toggle Actor View</button>
        </div>


      </div>
    </div>
  )

 

 

그리고 MovieDetail함수를 완성한다

function MovieDetail(props) {

  let movieId = props.match.params.movieId // movieId를 가져옴
  const [Movie, setMovie] = useState([])

  //useEffect() : 페이지에 들어오면 무슨 일을 할 건지, 렌더링 될 때 특정 작업을 실행할 수 있게
  useEffect(() => {

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

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


    console.log(props.match)
    fetch(endpointInfo)
    .then(response => response.json())
    .then(response =>{
      console.log(response)
      setMovie(response)

    })
  } , [])
}

 

 

결과창