function LandingPage() {
// 2. 가지고 온 API를 state에 넣어보자
const [Movies, setMovies] = useState([])
// 3. MainImage를 만들어보자
const [MainMovieImage, setMainMovieImage] = useState(null)
// loadMore 누를 때마다 페이지를 바꿔보자. 초기값은 (0페이지)
const [CurrentPage, setCurrentPage] = useState(0)
// 1. API를 가지고 와보자
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))
// .then(response => console.log(response.results[0]))
.then(response => {
// array
setMovies([...Movies, ...response.results])
// 가지고 온 이미지들 중에서 첫 번째
setMainMovieImage(response.results[0])
// 페이지 정보 바꿔주기
setCurrentPage(response.page)
})
}
예를 들어 지금 loadMore 버튼 눌러서 2페이지라고 치면 fechMovies 함수 통해서 2페이지의 정보들로 가는거지
-> 그런데 이전 1페이지의 이미지들은 사라지고 2페이지 (21-40개)의 이미지들로'만' setMovies가 되고 있는 상황
-> 이를 해결해주기 위해 ...Movies를 추가함.
setMovies([...Movies, ...response.results])
- 나머지 매개변수인지(rest) 전개 문법인지(spread) 2가지 경우가 있고 구별해주어야 함.
- 여기서는 spread 기능으로 사용됨
function showName(firstName, lastName, ...titles) {
alert( firstName + ' ' + lastName ); // Julius Caesar
// 나머지 인수들은 배열 titles의 요소가 됨
// titles = ["Consul", "Imperator"]
alert( titles[0] ); // Consul
alert( titles[1] ); // Imperator
alert( titles.length ); // 2
}
showName("Julius", "Caesar", "Consul", "Imperator");
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(...arr1, ...arr2) ); // 8
let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, ...arr, 2, ...arr2];
alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)
setMovies([...Movies, ...response.results])
"전개 문법은 이터러블 객체 여러 개를 전달하는 것도 가능함"
-> 즉 이전 페이지들의 ...Movies 이미지와, 새롭게 로딩되는 페이지의 ...response.results 이미지들을 다 Movies에 담겠다는 것
[JS] 자바스크립트 실행 순서 (feat. 이벤트루프) (0) | 2021.12.02 |
---|---|
[JS] 예약어 오류가 다른 이유 (0) | 2021.11.29 |
[Python] 'int' object is not callable (0) | 2021.11.09 |
[Python] 문제 풀면서 개념 다시 잡은 것들 (계속 업데이트 ing) (0) | 2021.11.09 |
[Python] copy.deepcopy (0) | 2021.09.28 |