-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
선생님 질문있습니다.
20.08.10 17:05 작성 조회수 101
1
const LandingPage = ()=>{
const [movies, setMovies] = useState([]);
const [MainMovieImage,setMainMovieImage] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [currentPage,setCurrentPage]= useState(0);
useEffect(() => {
const URL = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`
fetchMovie(URL);
}, []);
const fetchMovie = async (URL) => {
try {
setError(null);
setMovies(null);
setLoading(true);
const response = await axios.get(URL);
setMovies([...movies, ...response.data.results]);
setMainMovieImage(response.data.results[0]);
setCurrentPage(response.data.page)
console.log(response.data); // 데이터는 response.data 안에 들어있습니다.
} catch (e) {
setError(e);
}
setLoading(false);
};
if (loading) return <div>로딩중..</div>;
if (error) return <div>에러가 발생했습니다</div>;
const loadmore=()=>{
const URL = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=${currentPage+1}`
fetchMovie(URL);
}
loadmore 버튼을 누를때마다 리렌더링이 됩니다.
또 mainimage도 다음 page result[0]껄로 바뀌는데
리렌더링을 하지 않을 방법이 있을가요??
답변을 작성해보세요.
2
John Ahn
지식공유자2020.08.11
그러면 loadmore 함수에서 fetchMovie를 트리거 할때
fetchMovies(endpoint, true);
이런식으로 argument 하나 더 준다음에
const fetchMovies = (endpoint, fromLoadMoreitem) => {
fetchMovies 함수에도 파라미터로 가져와서
fromLoadMoreItem 이 loadmore에서 왔으면
setMainMovieImage(MainMovieImage || result.results[0])
이부분 생략해주게 하면 될것같습니다.
수고하세요 ~
답변 1