[리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드)

 

[리액트 실습] 간단 영화 앱 만들기 3 (components와 props)

 

1. 코드 

 

src/components/Movie.jsx

import React from 'react'


const IMG_BASE_URL = "https://image.tmdb.org/t/p/w1280/";

export default function Movie({title,poster_path,vote_average,id}) {
  return (
    //movie components내 view 작업 진행 
    <div className='movie-container'>
        <img src={IMG_BASE_URL + poster_path} alt = "영화포스터"/>
        <div className='movie-info'>
            <h4>{title}</h4>
            <span>{vote_average}</span>
            <p>
                {id}
            </p>
        </div>
    </div>
  )
}

//movie component에서 props를 받아서 데이터를 뿌려주는 작업 진행

 

src/App.js

// 데이터 가져오기 
import Movie from './components/Movie';
import { dummy } from './movieDummy';
//가져온 데이터를 반복해서 뿌려줌 

//movie components를 받는 container을 구성
function App() {
  return (
    <div>
      <div className = "app-container">
        {// jsx문법을 사용할 떄에는 {}중괄호 내에 입력 
        //화살표 함수 작성 
        dummy.results.map((item)=> {
          return (
          <Movie
          title = {item.title}
          poster_path = {item.poster_path}
          vote_average = {item.vote_average} 
          />
          )
        })

        }

      </div>
    </div>
  );
}

export default App;

 

src/movieDummy.js

export const dummy = {
//가져온 Api붙여넣기
}

API가 너무 길어서 텍스트로 대체한다 !

 

src/index.css

body{
  background-color: #22254b;
}



.app-container{
  display : flex;
  flex-wrap: wrap;
  justify-content: center;

}



.movie-container{
  width: 250px;
  margin: 16px;


  background-color: #373b69;
  color :white;
  border-radius: 5px;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}

.movie-container img{
  max-width: 100%;
}

.movie-info{
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;

}

.movie-info h4{
  margin:0;
}

.movie-info span{
  margin-left: 3px;
}