React에서 API로 영화 리스트와 정보를 끌어온 후
간단하게 레이아웃만 조절하며 보기좋게 정렬
↓ ↓index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
↓ ↓ App.js
import Movie from './components/Movie';
import {dummy} from './movieDummy';
function App() {
return (
<div>
<div className='app-container'>
{
dummy.results.map((item) => {
return (
<Movie
title={item.title}
poster_path={item.poster_path}
vote_average={item.vote_average}
/>
)
})
}
</div>
</div>
);
}
export default App;
↓ ↓ Movies.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 }) {
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>
)
}
↓ ↓ index.css
body {
background-color: #2E2E2E;
color: white;
}
.app-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.movie-container {
width: 250px;
margin: 16px;
background-color: #373b69;
border-radius: 5px;
}
.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;
}
↓ ↓ index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
↓ ↓ movieDunny.js
각자의 API키 받은 후 데이터 값 넣기
'개발 > 간단 개발 실습' 카테고리의 다른 글
| 유튜브 웹 페이지 실습 (2) | 2024.09.09 |
|---|---|
| [React] 로그인 페이지 구현 (0) | 2024.08.13 |
| [JS] 단어 추측 (0) | 2024.08.12 |
| [JS] 가위바위보 (vs PC) (0) | 2024.08.09 |
| [JS] 부딪히며 만들어보는 타자 연습 (Eng Ver.) (0) | 2024.08.07 |
