FE/React & TS
[REACT Movie App part-two] React-router / react-router-dom
yeahzzz
2023. 5. 11. 16:44
Movie.js
//Movie component는 이 properties를 다 부모 component로부터 받아옴.
function Movie({coverImg, title, summary, genres}){
return(
<div>
<img src={coverImg} />
<h2>{title}</h2>
<p>{summary}</p>
<ul>
{genres.map((g) => (
<li key={g}>{g}</li> ))}
</ul>
</div>
);
}
export default Movie;
App.js
import { useEffect, useState } from "react";
import axios from "axios";
import Movie from "./Movie";
function App() {
const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
const getMovies = async() => {
const json = await(await(fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=9.0&sort_by=year`))).json();
setMovies(json.data.movies);
setLoading(false);
};
useEffect(() => {
getMovies();
}, []);
console.log(movies);
return(
<div>
{loading ? (
<h1>Loading...</h1>
) : (
<div>
{movies.map((movie) =>(
<Movie
key={movie.id}
coverImg={movie.medium_cover_image}
title={movie.title}
summary={movie.summary}
genres={movie.genres}/>
))}
</div>
)
}
</div>
);
}
export default App;
props component로 받아서 사용하고 있음. key값 꼭 써주기!
//Movie component는 이 properties를 다 부모 component로부터 받아옴.
import PropTypes from 'prop-types'
function Movie({coverImg, title, summary, genres}){
return(
<div>
<img src={coverImg} />
<h2>{title}</h2>
<p>{summary}</p>
<ul>
{genres.map((g) => (
<li key={g}>{g}</li> ))}
</ul>
</div>
);
}
Movie.propTypes = {
coverImg: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired
}
export default Movie;
*propTypes를 통한 prop 검증
컴포넌트의 필수 props를 지정하거나 props의 타입을 지저할 때는 propTypes 사용.
React-Router: 페이지 전환
1. movies.js
//Movie component는 이 properties를 다 부모 component로부터 받아옴.
import PropTypes from 'prop-types'
function Movie({coverImg, title, summary, genres}){
return(
<div>
<img src={coverImg} />
<h2>{title}</h2>
<p>{summary}</p>
<ul>
{genres.map((g) => (
<li key={g}>{g}</li> ))}
</ul>
</div>
);
}
Movie.propTypes = {
coverImg: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired
}
export default Movie;
2. Home.js
import { useEffect, useState } from "react";
import Movie from "../components/Movie";
function Home() {
const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
const getMovies = async() => {
const json = await(await(fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=9.0&sort_by=year`))).json();
setMovies(json.data.movies);
setLoading(false);
};
useEffect(() => {
getMovies();
}, []);
console.log(movies);
return(
<div>
{loading ? (
<h1>Loading...</h1>
) : (
<div>
{movies.map((movie) =>(
<Movie
key={movie.id}
coverImg={movie.medium_cover_image}
title={movie.title}
summary={movie.summary}
genres={movie.genres}/>
))}
</div>
)
}
</div>
);
}
export default Home;
3. App.js
import {BrowserRouter, Route, Routes, Link} from "react-router-dom";
import Home from './routes/Home'
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={< Home / >} />
</Routes>
</BrowserRouter>
);
}
export default App;
+ 전환
<Routes>
<Route path="/movie" element= {< Detail />} />
<Route path="/" element={< Home / >} />
</Routes>
페이지 전환 시, 전체 페이지 재실행을 피하는 방법
→ Link
브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트.
Movie.js
import {Link} from 'react-router-dom'
function Movie({coverImg, title, summary, genres}){
return(
<div>
<img src={coverImg} />
<h2><Link to="/movie">{title}</Link></h2>
<p>{summary}</p>
<ul>
{genres.map((g) => (
<li key={g}>{g}</li> ))}
</ul>
</div>
);
}