React_part7.4_Movie App part Two
react JS 앱에서 페이지를 전환하는 방법
먼저 React의 장점을 활용하여 기존 코드를 깔끔하게 만들어보자.
component를 사용하자 !
먼저 Movie.js라는 컴포넌트를 만들 것이다.
그리고 App.js 는 아래와 같이 수정해준다.
import { useEffect, useState } from "react";
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=8.8&sort_by=year`
)
).json();
setMovies(json.data.movies);
setLoading(false);
};
useEffect(() => {
getMovies();
}, []);
return (
<div>
{loading ? (
<h1>Loading...</h1>
) : (
<div>
{movies.map((movie) => (
<div key={movie.id}>
<img src={movie.medium_cover_image} />
<h2>{movie.title}</h2>
<p>{movie.summary}</p>
</div>
))}
</div>
)}
</div>
);
return null;
}
export default App;
라우터 이용해 페이지 전환하기
먼저 설치!!
라우터 별로 생각해서 분리한다.
예를들어 하나의 router 는 home, 홈스크린, 홈페이지 등등
... routes 폴더를 만들어주자 !
App.js는 rounter을 render 하는 용으로만 사용할 것이다.
routes 폴더에 페이지들을 담았다.
router은 URL을 보고있는 component고
URL에 따라 다른 component를 보여줄 것이다. Home 이나 Detail을
Author And Source
이 문제에 관하여(React_part7.4_Movie App part Two), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@angel_eugnen/Reactpart7.4Movie-App-part-Two저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)