-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
혹시 이렇게 했을 때와 강사님 코드와 비교해서 장단점이 있을까요?
20.09.03 17:57 작성 조회수 93
0
useEffect에서 Page state가 업데이트 될 때마다 fetch를 실행하는 방법으로 만들었습니다
강사님 코드와 비교해서 장단점이 있을까요?
function LandingPage() {
const [Movies, setMovies] = useState([]);
const [MainMovieImage, setMainMovieImage] = useState(null);
const [Page, setPage] = useState(1);
useEffect(() => {
const endpotion = `${BASE_URL}/movie/popular?api_key=${API_KEY}&language=ko&page=${Page}`;
fetch(endpotion)
.then((res) => {
return res.json();
})
.then((data) => {
console.log(data);
setMovies([...Movies, ...data.results]);
if (Page === 1) {
setMainMovieImage(data.results[0]);
}
});
}, [Page]);
const loadMoreHandler = () => {
setPage(Page + 1);
};
return (
<>
<div style={{ width: "100%", margin: "0" }}>
{/* MAIN IMAGE */}
{MainMovieImage && (
<MainImage
image={`${IMAGE_BASE_URL}/w1280/${MainMovieImage.backdrop_path}`}
title={MainMovieImage.title}
desc={MainMovieImage.overview}
/>
)}
<div style={{ width: "85%", margin: "1rem auto" }}>
<h2>Movies by latest</h2>
<hr />
{/* Movie Grid Cards */}
<Row gutter={[16, 16]}>
{Movies &&
Movies.map((movie, i) => {
return (
<div key={i}>
<GridCards
image={
movie.poster_path
? `${IMAGE_BASE_URL}/w500/${movie.poster_path}`
: null
}
movieId={movie.id}
movieName={movie.title}
/>
</div>
);
})}
</Row>
</div>
<div style={{ display: "flex", justifyContent: "center" }}>
<button onClick={loadMoreHandler}>Load More</button>
</div>
</div>
</>
);
}
답변을 작성해보세요.
답변 0