[React] Movie App 만들기 (개인 프로젝트) - 3

John Ahn님의 인프런 강의를 따라가면서 진행중입니다.
개인 공부 용도로 기록합니다. 문제 시 삭제

 

https://xxilliant.tistory.com/75

[React] Movie App 만들기 (개인 프로젝트) - 2

 

1. 진행 사항 (현 포스팅 기준)

 

Load More (더보기 버튼) 기능 만들기

 

강의 스크린샷

 

 

2. 함수 분리

 

버튼을 누르면 불러오는 page가 변경되도록 함수를 짤건데,

fetch 부분을 재사용하기 위해 분리해주었습니다.

 

그리고 페이지 리셋이 아닌, 목록 누적을 위해 setMovies 부분 코드를

setMovies( [...Movies, ...response.results] ) 로 바꿔줍니다

CurrentPage 변수도 만들어줍니다 (useState로)

 

 

그리고 버튼에 onClick 이벤트를 추가해줍니다. 함수명은 loadMoreItems

 

button event

 

함수의 내용은 endpoint url의 마지막 페이지 부분을 1씩 증가시키고

그 페이지를 함께 fetch하기.

 

이번 내용은 간단하네요. 끝.

 

정상적으로 작동됨

 

근데 외국 기준이라 그런지 순위권에 호러물이 많은듯;