-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
리렌더링 문제에 대해 질문이 있습니다.
20.11.16 08:34 작성 조회수 182
0
import React, { useEffect, useState } from 'react'
import { FaCode } from "react-icons/fa";
import { API_URL, API_KEY, IMAGE_BASE_URL } from '../../Config'
import MainImage from './Sections/MainImage'
import GridCards from '../commons/GridCards'
import { Row } from 'antd'
function LandingPage() {
const [Movies, setMovies] = useState([])
const [MainMovieImage, setMainMovieImage] = useState(null)
const [CurrentPage, setCurrentPage] = useState(0)
useEffect(() => {
const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en_US&page=1`
fetchMovies(endpoint)
}, [])
const fetchMovies = (endpoint) => {
fetch(endpoint)
.then(response => response.json())
.then(response => {
console.log(response)
setMovies([...Movies, ...response.results])
setMainMovieImage(MainMovieImage || response.results[0])
setCurrentPage(response.page)
})
}
const loadMoreItems = () => {
const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en_US&page=${CurrentPage + 1}`
fetchMovies(endpoint)
}
return (
<div style={{ width: '100%', margin:'0'}}>
{/* Main Image */}
{MainMovieImage &&
<MainImage
image={`${IMAGE_BASE_URL}w1280/${MainMovieImage.backdrop_path}`}
title={MainMovieImage.original_title}
text={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, index) => (
<React.Fragment key={index}>
<GridCards
LandingPage
image={movie.poster_path ?
`${IMAGE_BASE_URL}w500${movie.poster_path}` : null
}
movieId={movie.id}
movieName={movie.original_title}
/>
</React.Fragment>
))}
</Row>
</div>
<div style={{ display:'flex', justifyContent: 'center'}}>
<button onClick={loadMoreItems}>Load More</button>
</div>
</div>
)
}
export default LandingPage
밑의 질문도 보고
setMainMovieImage(MainMovieImage || response.results[0]) 으로 바꾸고 나서 load more 버튼을 클릭하면 메인 이미지는 변경되지 않는 것을 확인했습니다.
그런데 여전히 그리드 쪽은 리렌더링되면서 해주신 것처럼 버튼을 누른 자리에서 스크롤이 있고 카드들이 더 생기는 것이 아니라 새로고침처럼 load more 버튼이 있는 제일 밑으로 이동합니다.
이 문제를 수정하려면 어떻게 할 수 있을까요? 아니면 문제를 수정하기 위해 어떤 게 필요할까요?
답변을 작성해보세요.
답변 0