maingImage
Câu trả lời 4
1
안녕하세요.
강사님께서 적으신 코드를 보면 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
fetchMovie를 처음 로드 할 때, current page가 0 (use State)거나 endpoint에서 page가 1이니까,
setMainMovieImage를 if문으로 호출하게 하셔도 될 것 같습니다.
0
코드는 좀 더럽지만ㅠ 저는 이런식으로 url값을 1번 이미지의 url값으로 해줬습니다.
0
에러서 요렇게만 해보세요
0
229
1
antd Menu 질문
0
263
1
movieTitle
0
220
1
npm run dev 연결이 안됩니다ㅜㅜ
0
413
1
npm run dev 오류
0
858
1
403 forbidden error
0
1069
2
npm run dev 오류
0
697
1
모듈이 없다는데요
0
1278
1
npm run dev 실행시 오류
0
5381
1
504 Gateway Timeout Error
0
1452
1
컴파일 에러 관련 문의
0
505
1
npm run dev 오류
0
761
1
이미지가 안떠요...
0
372
2
npm run dev 실행하고 인증이 안되는거 같아요
0
533
1
cd client에서 npm install 오류
0
1421
1
npm run dev시 localhost가 자꾸 3000으로 연결됩니다
0
973
1
Netlify + AWS Elastic Beanstalk 를 이용한 배포
1
1788
1
[nodemon] app crashed - waiting for file changes before starting... Error occurred while proxying request localhost:3000/api/hello to http://localhost:5000/ 해결법
0
461
0
지금 듣기엔 안되는 강의일까요?
0
720
1
사진이 2개 2개씩 다른줄에 나와요 ㅠㅠ
0
428
1
비동기 처리가 영상과 다르게 됩니다..
0
248
0
#2강 npm install
0
773
4
LandingPage.js 내 useState(null) 이용하는 이유
0
227
0
client 부분에 App.js 와 Config.js 위치가 다른데 상관없는 것인가요?
0
385
1

