-
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
maingImage
22.02.20 19:09 작성 조회수 164
2
loadmore 누르면 메인 이미지도 바뀌게 되네요
이미지를 page1번상태로 고정하고싶은데 어떻게 하면 될까요?
답변을 작성해보세요.
1
홍익대 컴공 이예은
2022.02.22
안녕하세요.
강사님께서 적으신 코드를 보면 loadMoreItems와 useEffect에서 각각
setMainMovieImage(...[response.results[0]])
로 main이미지를 바꿔주고 있습니다.
따라서 해당 부분을 맨 처음 한번만(page1을 불러올 때) 포함하면 됩니다. 매번 반복하지 않구요.
useEffect(() => {
const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
fetch(endpoint)
.then(response => response.json())
.then(response => {
console.log(response)
setMovies([...Movies, ...response.results])
setMainMovieImage(...[response.results[0]])
setCurrentPage(response.page)
})
}, [])
const fetchMovies = (endpoint) => {
fetch(endpoint)
.then(response => response.json())
.then(response => {
console.log(response)
setMovies([...Movies, ...response.results])
//setMainMovieImage(...[response.results[0]])
setCurrentPage(response.page)
})
}
위의 코드를 따라 적으시면 원하시는 구현대로 동작하나 코드가 반복되어 우아하지 못한 코드라 느껴집니다.
그래도 코드를 줄이려는 노력은 해봤습니다.
아직은 리액트가 어렵게 느껴지네요.
useEffect(() => {
const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
fetch(endpoint)
.then(response => response.json())
.then(response => {
setMainMovieImage(...[response.results[0]])
})
fetchMovies(endpoint)
}, [])
const fetchMovies = (endpoint) => {
fetch(endpoint)
.then(response => response.json())
.then(response => {
console.log(response)
setMovies([...Movies, ...response.results])
//setMainMovieImage(...[response.results[0]])
setCurrentPage(response.page)
})
}
작성자님께서 코드를 우아하게 줄일 수 있는 방법을 알게 되신다면 공유해주세요 ^^
아니면 언젠가 여기에 John Ahn님의 가호가 있길...
0
HyunJung Kim
2022.05.13
fetchMovie를 처음 로드 할 때, current page가 0 (use State)거나 endpoint에서 page가 1이니까,
setMainMovieImage를 if문으로 호출하게 하셔도 될 것 같습니다.
const fetchMovies = (endpoint) => {
fetch(endpoint)
.then(response => response.json())
.then(response => {
console.log(response);
setMovies([...Movies, ...response.results])
if(CurrentPage === 0) {
setMainMovieImage(response.results[0])
}
setCurrentPage(response.page)
})
}
0
0
김찹귤
2022.02.22
<MainImage
mainImage={mainImage}
image={`${IMAGE_BASE_URL}w1280/iQFcwSGbZXMkeyKrxbPnwnRo5fl.jpg`}
/>
답변 4