https://github.com/Boin-Kau/learn-react-with-simple-demo/tree/main/react-basic-demo
//movie.js
import React from 'react'
const IMG_BASE_URL = "<https://image.tmdb.org/t/p/w1280/>";
export default function Movie({ title, poster_path, vote_average }) {
return (
<div className="movie-container">
<img src={IMG_BASE_URL + poster_path} alt="영화포스터" />
<div className="movie-info">
<h4>{title}</h4>
<span>{vote_average}</span>
</div>
</div>
);
}
//movie Dummy.js
// 사용한 API : TMDB 현재 한국에서 상영 중인 영화 API
// API Document : <https://developers.themoviedb.org/3/movies/get-now-playing>
// Request : <https://api.themoviedb.org/3/movie/now_playing?api_key=c4e59022826dc465ea5620d6adaa6813&language=ko&page=1®ion=KR>
// 아래는 Response Data
export const dummy = {
dates: { maximum: "2022-06-29", minimum: "2022-05-12" },
page: 1,
results: [
{
adult: false,
backdrop_path: "/wo3l9p0S7pcvwlzlndtKgq0peRJ.jpg",
genre_ids: [28, 12, 878],
id: 507086,
original_language: "en",
original_title: "Jurassic World Dominion",
overview:
"공룡들의 터전이었던 이슬라 누블라 섬이 파괴된 후, 마침내 공룡들은 섬을 벗어나 세상 밖으로 출몰한다. 지상에 함께 존재해선 안 될 위협적 생명체인 공룡의 등장으로 인류 역사상 겪어보지 못한 사상 최악의 위기를 맞이한 인간들. 지구의 최상위 포식자 자리를 걸고 인간과 공룡의 최후의 사투가 펼쳐진다.",
popularity: 2133.719,
poster_path: "/odxdUZWZ7fBfy3ZRj063wuJnZvo.jpg",
release_date: "2022-06-01",
title: "쥬라기 월드: 도미니언",
video: false,
vote_average: 6.7,
vote_count: 727,
},
{
adult: false,
backdrop_path: "/odJ4hx6g6vBt4lBWKFD1tI8WS4x.jpg",
genre_ids: [28, 18],
id: 361743,
original_language: "en",
original_title: "Top Gun: Maverick",
overview:
"최고의 파일럿이자 전설적인 인물 매버릭은 자신이 졸업한 훈련학교 교관으로 발탁된다. 그의 명성을 모르던 팀원들은 매버릭의 지시를 무시하지만 실전을 방불케 하는 상공 훈련에서 눈으로 봐도 믿기 힘든 전설적인 조종 실력에 모두가 압도된다. 매버릭의 지휘 아래 견고한 팀워크를 쌓아가던 팀원들에게 국경을 뛰어넘는 위험한 임무가 주어지자 매버릭은 자신이 가르친 동료들과 함께 마지막이 될지 모를 하늘 위 비행에 나서는데…",
popularity: 938.073,
poster_path: "/jMLiTgCo0vXJuwMzZGoNOUPfuj7.jpg",
release_date: "2022-06-22",
title: "탑 건: 매버릭",
video: false,
vote_average: 8.3,
vote_count: 1219,
},
{
adult: false,
backdrop_path: "/wgdWNBqPIAH29ZsL3I0AVx7XRed.jpg",
genre_ids: [28, 9648, 53],
id: 615173,
original_language: "ko",
original_title: "마녀(魔女) Part2. The Other One",
overview:
"자윤이 사라진 뒤, 정체불명의 집단의 무차별 습격으로 마녀 프로젝트가 진행되고 있는 아크가 초토화된다. 그곳에서 홀로 살아남은 소녀는 생애 처음 세상 밖으로 발을 내딛고 우연히 만난 경희의 도움으로 농장에서 지내며 따뜻한 일상에 적응해간다. 한편, 소녀가 망실되자 행방을 쫓는 책임자 장과 마녀 프로젝트의 창시자 백총괄의 지령을 받고 제거에 나선 본사 요원 조현, 경희의 농장 소유권을 노리는 조직의 보스 용두와 상해에서 온 의문의 4인방까지 각기 다른 목적을 지닌 세력이 하나 둘 모여들기 시작하면서 소녀 안에 숨겨진 본성이 깨어나는데…",
popularity: 190.956,
poster_path: "/cah6iIYQBctvCmBjsKGb1NCiygr.jpg",
release_date: "2022-06-15",
title: "마녀(魔女) Part2. The Other One",
video: false,
vote_average: 4.5,
vote_count: 2,
},
{
adult: false,
backdrop_path: "/ic8h5oYQWwqQWPyfpZUSomZTdao.jpg",
genre_ids: [18, 53],
id: 821427,
original_language: "en",
original_title: "The Novice",
overview:
"대학 신입생 알렉스는 교내 조정부에 가입한 후 동급생 제이미에게 경쟁심을 느낀다. 늘 최고를 갈망하는 알렉스는 팀 1군에 들기 위해 훈련을 거듭하고, 스스로를 극한으로 내몰기 시작하는데···",
popularity: 66.121,
poster_path: "/xjd6s1jgB1rwKQsiHv995aQbamY.jpg",
release_date: "2022-05-25",
title: "더 노비스",
video: false,
vote_average: 6.4,
vote_count: 57,
},
{
adult: false,
backdrop_path: "/iuM006FCrVXqvwLg4R0hkST0HPy.jpg",
genre_ids: [80, 28],
id: 619803,
original_language: "ko",
original_title: "범죄도시 2",
overview:
"가리봉동 소탕작전 후 4년 뒤, 금천서 강력반은 베트남으로 도주한 용의자를 인도받아 오라는 미션을 받는다. 괴물형사 마석도와 전일만 반장은 현지 용의자에게서 수상함을 느끼고, 그의 뒤에 무자비한 악행을 벌이는 강해상이 있음을 알게 된다. 마석도와 금천서 강력반은 한국과 베트남을 오가며 역대급 범죄를 저지르는 강해상을 본격적으로 쫓기 시작하는데...나쁜 놈들 잡는 데 국경 없다! 통쾌하고 화끈한 범죄 소탕 작전이 다시 펼쳐진다!",
popularity: 71.791,
poster_path: "/9oonDgLkh42GsLkbVmW7nU1ib6u.jpg",
release_date: "2022-05-18",
title: "범죄도시 2",
video: false,
vote_average: 6.8,
vote_count: 15,
},
{
adult: false,
backdrop_path: "/jCSpD2Sj67qOVnOu4b3JsXl8NO4.jpg",
genre_ids: [10752, 36, 18],
id: 661231,
original_language: "en",
original_title: "Operation Mincemeat",
overview:
"사상 최대의 인명 피해를 낳은 제2차 세계대전, 연합군과 추축군은 전쟁을 승리로 이끌 교두보 시칠리아를 두고 팽팽한 대립을 펼친다. 하지만 추축군 독일의 위세가 상당해 시칠리아에는 이미 추축군 병력 무려 23만 명이 주둔해 있던 상황! 연합군은 해군 정보장교 이웬 몬태규와 찰스 첨리를 주축으로 전쟁의 승기를 잡을 단 한 번의 민스미트 작전을 계획하는데…",
popularity: 60.05,
poster_path: "/hPNb2m2jgchIpAoyGauol3wZHub.jpg",
release_date: "2022-05-12",
title: "민스미트 작전",
video: false,
vote_average: 6.6,
vote_count: 233,
},
{
adult: false,
backdrop_path: "/bIFrsAcqkLUUxaaiqqpFexYPeCh.jpg",
genre_ids: [14, 27, 53],
id: 532710,
original_language: "en",
original_title: "Firestarter",
overview:
"평범한 사람들은 없는 특별한 능력을 가졌다는 이유만으로 과거 정부의 비밀 실험 기관인 ‘더 샵’에 의해 이용당했던 ‘앤디’와 ‘비키’는 ‘더 샵’에서 가까스로 탈출한 뒤 딸 ‘찰리’를 낳고 조용한 나날을 보내고 있다. 시간이 흘러 말로는 설명할 수 없는 내면의 힘을 느끼기 시작한 ‘찰리’는 어느 날 학교에서 한 남학생에게 괴롭힘을 당하고 순간적인 분노에 휩싸여 숨어 들어간 화장실을 파괴하는 지경에 이른다. 이로 인해 ‘더 샵’에서 개편된 비밀 기관인 ‘DSI’가 ‘찰리’의 존재를 알게 되고 또 다른 초능력자 ‘레인버드’에게 이들을 잡아오라는 명령을 내린다. ‘찰리’는 통제할 수 없는 엄청난 힘의 발현에 혼란스러워 하고 그런 딸을 보호하기 위해 ‘앤디’와 ‘비키’는 고군분투하지만 ‘레인버드’를 앞세운 ‘DSI’가 이들의 숨통을 빠르게 조여 오기 시작하는데…",
popularity: 59.075,
poster_path: "/ko1iKcUp4iIjTNAYFOWFVG8tUi7.jpg",
release_date: "2022-05-19",
title: "파이어스타터",
video: false,
vote_average: 6.1,
vote_count: 256,
},
{
adult: false,
backdrop_path: "/ta17TltHGdZ5PZz6oUD3N5BRurb.jpg",
genre_ids: [53],
id: 924482,
original_language: "en",
original_title: "The Ledge",
overview:
"친구와 함께 암벽등반을 간 켈리는 그곳에서 만난 남성들에게 친구가 살해당하는 것을 목격하고 카메라로 찍는데… 쫓아오는 그들을 피할 곳은 눈앞의 거대한 암벽뿐...",
popularity: 75.432,
poster_path: "/qXU3lr4YmyT8y6kaX1CcpRiqia2.jpg",
release_date: "2022-06-15",
title: "더 렛지",
video: false,
vote_average: 6.2,
vote_count: 25,
},
{
adult: false,
backdrop_path: "/92qGVE0z8Q29AxtRvg5qlRJbTut.jpg",
genre_ids: [10749],
id: 949648,
original_language: "ko",
original_title: "감동주의보",
overview:
"희귀질환인 감동병을 앓는 컬링 천재 보영(홍수아).\\r 평생을 함께하고 싶은 시골청년 ‘철기’(최웅)를 만나\\r 인생 최고의 순간들을 맞이한다.\\r 어느날, 코피가 멈추게 하는 방법(?)을 찾게 되면서\\r 포기했던 컬링을 다시 도전하게 되는데…\\r 보영은 감동병을 이기고 꿈과 사랑\\r 두 마리 토끼를 다 잡을 수 있을까?",
popularity: 14.214,
poster_path: "/kX44kd0AB07jA3vLON4taNgrQih.jpg",
release_date: "2022-06-22",
title: "감동주의보",
video: false,
vote_average: 0,
vote_count: 0,
},
{
adult: false,
backdrop_path: "/dom8lzl2iU46nDu6s4lBolBNjQs.jpg",
genre_ids: [18],
id: 736732,
original_language: "ko",
original_title: "브로커",
overview:
"세탁소를 운영하지만 늘 빚에 시달리는 상현과 베이비 박스 시설에서 일하는 보육원 출신의 동수. 거센 비가 내리는 어느 날 밤, 그들은 베이비 박스에 놓인 한 아기를 몰래 데려간다. 하지만 이튿날, 생각지 못하게 엄마 소영이 아기 우성을 찾으러 돌아온다. 아기가 사라진 것을 안 소영이 경찰에 신고하려 하자 솔직하게 털어놓는 두 사람. 우성이를 잘 키울 적임자를 찾아 주기 위해서 그랬다는 변명이 기가 막히지만 소영은 우성이의 새 부모를 찾는 여정에 상현, 동수와 함께하기로 한다. 한편 이 모든 과정을 지켜본 형사 수진과 후배 이형사. 반 년째 이어온 수사를 마무리할 수 있는 결정적 증거를 포착하기 위해 이들의 뒤를 조용히 쫓는다.",
popularity: 24.907,
poster_path: "/qJ1gDx7BkJ4Pjfjd3Ulh0WzL3zv.jpg",
release_date: "2022-06-08",
title: "브로커",
video: false,
vote_average: 7.3,
vote_count: 6,
},
{
adult: false,
backdrop_path: "/lbZzieieeSFRNU8sa1COMyOlpRI.jpg",
genre_ids: [99],
id: 744965,
original_language: "ko",
original_title: "니얼굴",
overview:
"양평의 문호리 프리마켓에서 사람들의 캐리커처를 그려주는 은혜씨. 그녀에게는 발달장애(다운증후군)가 있지만 그건 열정적인 ‘니얼굴’ 작가에겐 큰 영향을 미치지 못한다. 은혜씨는 차가운 날씨 속에서도 손이 트도록 캐리커처를 그리며 자신만의 시선으로 이천 명이 넘는 사람들의 얼굴을 작품에 담아 온 근면한 작가다.",
popularity: 22.868,
poster_path: "/faWX1XIiuZ5xyYJXaMUoNWR4A00.jpg",
release_date: "2022-06-23",
title: "니얼굴",
video: false,
vote_average: 0,
vote_count: 0,
},
{
adult: false,
backdrop_path: null,
genre_ids: [18],
id: 980491,
original_language: "ko",
original_title: "우스운게 딱! 좋아!",
overview:
"눈치 없는 성구 때문에 울화통이 치미는 현,\\r 전 남자친구에게 청첩장을 받은 소연,\\r 서로 자기 말만 하는 가족들과 하루종일 지지고 볶는 민정,\\r 죽은 친구의 은밀한 물건을 숨겨야 하는 소연. 웃기고 열받고 공감되고 손에 땀을 쥐게 하는,\\r 본격 MZ 고군분투 코미디!",
popularity: 21.585,
poster_path: "/pFVNo8chKdSeSvBluJknlPIM43s.jpg",
release_date: "2022-06-23",
title: "우스운게 딱! 좋아!",
video: false,
vote_average: 0,
vote_count: 0,
},
{
adult: false,
backdrop_path: null,
genre_ids: [16],
id: 977826,
original_language: "ko",
original_title: "극장판 윌벤져스: 수상한 캠핑 대소동",
overview:
"동물들과의 대화는 물론, 공룡 젤리를 먹고 엄청난 초능력을 발휘하는 ‘윌리엄’과 ‘벤틀리’는 슈퍼 히어로가 되고 싶은 사고뭉치 히어로 꿈나무들. 어느 날, 샘 아빠와 함께 즐거운 캠핑 여행을 떠난 ‘윌벤져스’는 놀이터에서 신비로운 능력을 가진 여우 소녀 ‘미호’를 만나 친구가 된다 깊은 숲속 신비한 여우굴로 향한 ‘윌벤져스’는 ‘미호’의 놀라운 비밀을 알게 되고, ‘미호’ 가족을 노리는 사냥꾼들의 습격으로 모두가 큰 위험에 빠지고 마는데… 과연 ‘윌벤져스’는 아빠와 친구를 구하고, 무사히 캠핑을 마칠 수 있을까?!",
popularity: 21.48,
poster_path: "/aqFbi9o4RgM449AeZlzIQYH1INa.jpg",
release_date: "2022-06-23",
title: "극장판 윌벤져스: 수상한 캠핑 대소동",
video: false,
vote_average: 0,
vote_count: 0,
},
{
adult: false,
backdrop_path: null,
genre_ids: [18],
id: 982834,
original_language: "ko",
original_title: "The Boxer",
overview:
"‘동석’(결휘)은 복싱 전국체전에서 우승하지만 ‘청무관’의 관장이자 아버지인 ‘순일’(문창길)의 후광으로 인한 승부조작이라는 오명을 쓰고 사람들에게 인정받지 못한다. 그렇게 체육관을 뛰쳐나와 3류 양아치 같은 삶을 살던 그는 어느 날 아버지가 죽었다는 소식을 듣게 되고, 아버지의 마지막 유산인 ‘청무관’의 간판을 지키기 위해 가장 무모한 시합을 준비하게 된다!",
popularity: 23.152,
poster_path: "/qKvCCMIvexxNnZRcFi5Eb0vM10S.jpg",
release_date: "2022-06-23",
title: "갓길로 달리는 코뿔소",
video: false,
vote_average: 0,
vote_count: 0,
},
{
adult: false,
backdrop_path: "/A1bWhTFQKkhF1yhSKWosSyzn2Hp.jpg",
genre_ids: [80, 18, 10749, 9648],
id: 705996,
original_language: "ko",
original_title: "헤어질 결심",
overview:
"산 정상에서 추락한 한 남자의 변사 사건. 담당 형사 해준은 사망자의 아내 서래와 마주하게 된다. 남편의 죽음 앞에서 특별한 동요를 보이지 않는 서래. 경찰은 보통의 유가족과는 다른 서래를 용의선상에 올린다. 해준은 사건 당일의 알리바이 탐문과 신문, 잠복수사를 통해 서래를 알아가면서 그녀에 대한 관심이 점점 커져가는 것을 느낀다. 한편, 좀처럼 속을 짐작하기 어려운 서래는 상대가 자신을 의심한다는 것을 알면서도 조금의 망설임도 없이 해준을 대하는데...",
popularity: 20.525,
poster_path: "/wKArLUTzdWRg0Y3sIlgwY7BQ2u8.jpg",
release_date: "2022-06-29",
title: "헤어질 결심",
video: false,
vote_average: 0,
vote_count: 0,
},
{
adult: false,
backdrop_path: "/2kj6FOo0B9NtCen1Ta7LoaPW9wG.jpg",
genre_ids: [18, 878],
id: 585378,
original_language: "en",
original_title: "After Yang",
overview:
"함께 살던 안드로이드 인간 양이 어느 날 작동을 멈추자 제이크 가족은 그를 수리할 방법을 찾는다. 그러던 중, 양에게서 특별한 메모리 뱅크를 발견하고 그의 기억을 탐험하기 시작하는데…",
popularity: 20.975,
poster_path: "/tDeH8dFeKpHQCRFbs6So05qp6ZJ.jpg",
release_date: "2022-06-01",
title: "애프터 양",
video: false,
vote_average: 6.8,
vote_count: 83,
},
{
adult: false,
backdrop_path: "/aSgFDRnfppKxRGZE8BWOfgzAR3k.jpg",
genre_ids: [28, 53, 27],
id: 523638,
original_language: "en",
original_title: "Prisoners of the Ghostland",
overview:
"붉은 조명이 드리운 스산한 사무라이 마을. 신비로운 소녀 ‘버니스’와 그녀의 친구들이 한밤중 몰래 탈출을 시도한다. 사라진 그녀를 찾기 위해 사무라이 마을의 총독은 ‘히어로’를 고용한다. 그가 도착한 곳은 오래전 끔찍한 폭발로 시간이 멈추고 희망이 사라진 황폐한 마을 ‘고스트랜드’ 그곳에서 목소리를 잃은 ‘버니스’를 찾은 ‘히어로’는 ‘고스트랜드’의 진짜 정체를 알게 되는데…",
popularity: 15.973,
poster_path: "/xZtWqaByP0ov8Rx5sE0MVOuxOQP.jpg",
release_date: "2022-06-29",
title: "고스트랜드",
video: false,
vote_average: 5,
vote_count: 309,
},
{
adult: false,
backdrop_path: null,
genre_ids: [10402],
id: 987053,
original_language: "ko",
original_title: "두개의 눈",
overview:
"2021년 국립극장의 ‘여우락 페스티벌’ 개막작으로 선정된\\r 판소리와 미디어 아트가 결합된 공연이다. ‘무토’와 ‘입과손 스튜디오’가 함께 만든 공연으로\\r 판소리 ‘심청가’를 심청이 아빠 맹인 심학규의 관점으로 재해적한 작품이다. 내면과 외부에서 바라보는 시선,\\r 심청이와 아버지 그리고 나와 너의 이야기를\\r 두 개의 눈을 통해 대립적인 구성으로\\r 다양한 시각을 담았다.",
popularity: 20.664,
poster_path: "/v897flqaS9r8U8MthjtDADGFyvy.jpg",
release_date: "2022-06-23",
title: "두개의 눈",
video: false,
vote_average: 0,
vote_count: 0,
},
{
adult: false,
backdrop_path: "/qc2gwz3yFssevJVuz0RiZuciAj3.jpg",
genre_ids: [18, 10749],
id: 746131,
original_language: "fr",
original_title: "Les Olympiades",
overview:
"낭만을 잃었다 생각한 그곳에서 불현듯 사랑을 만났다. 사랑을 원하는 에밀리, 사랑이 두려운 노라, 사랑이 값비싼 앰버 스위트, 사랑을 몰랐던 카미유, 흔들리고 불안했던 그 사랑이, 우리는 전부라 생각했다. 여전히 사랑을 믿는 도시.",
popularity: 10.029,
poster_path: "/mKgEkNBBN6vfY463oy7AKQ5Xe2f.jpg",
release_date: "2022-05-12",
title: "파리, 13구",
video: false,
vote_average: 7,
vote_count: 124,
},
{
adult: false,
backdrop_path: "/cv6Nn8Yt9mgFoUSievEdW9JK82A.jpg",
genre_ids: [18],
id: 423333,
original_language: "en",
original_title: "Mass",
overview:
"돌이킬 수 없는 사건으로 아이를 잃은 두 부부의 슬픔, 분노, 절망, 후회가 폭발하는 111분의 마스터피스",
popularity: 8.288,
poster_path: "/25hs4cufSf4bAfwjJbTZbEKWyZg.jpg",
release_date: "2022-05-18",
title: "매스",
video: false,
vote_average: 7.8,
vote_count: 115,
},
],
total_pages: 3,
total_results: 44,
};
api를 어떻게 받느냐에 따라 코드가 다른듯?