[클론코딩] 무비앱 시리즈 #6

#6 Load More Button 만들기

 

Load More 버튼을 누르면 추가로 20개씩 영화 정보가 업데이트 되게 할 것이다

 

1. button을 누르면 이벤트가 발생하게 만들기

Button을 클릭하면 어떠한 이벤트가 발생해야 하므로 아래와 같이 작성한다

<div style={ {display:'flex', justifyContent: 'center'} }>
     <button onClick={loadMoreItems}>Load More</button>
</div>

클릭하면 loadMoreItems가 실행된다는 뜻

 

2. 코드 변경, 추가하기

loadMoreItems 코드를 만들기 전에, 페이지에 대한 코드를 작성해준다

const [CurrentPage, setCurrentPage] = useState(0)

 

또한 자주 쓰이기 때문에 fetch구문을 하나의 함수로 작성해준다

    const fetchMovies = (endpoint)=>{
        fetch(endpoint) // 인기있는 영화 가져오기
        .then(response => response.json()) // 결괏값 가져오기
        .then(response =>{
            console.log(response)
            // setMovies에서 가져온 영화 정보를 덮어쓰기 때문에 업데이트가 안됨
            // 있던 것에 추가하려면 setMovies([...Movies, ...response.results])
            setMovies([...Movies, ...response.results]) // = setMovies(...[response.results])
            setMainMovieImage(response.results[0])
            setCurrentPage(response.page)
        } )
    }

여기서 setMovies에 있는 파라미터가 바뀌었다

원래는 setMovies(response.results)였는데 이렇게 하면

Load More 버튼을 누르면

그림만 바뀜

페이지가 새로 안생기고 그림만 바뀐다

그래서 이미 있던 영화 20개에 새롭게 업데이트된 영화 20개를 받아온다는 의미로

setMovies([...Movies, ...response.results])로 바꾼 것 같은데 자세히는 모르겠다

 

아무튼 그래서 useEffect 코드는 fetchMovies 함수를 이용하여 간략하게 줄일 수 있다

    useEffect(() => {
        // page 업데이트하면서 20개씩 받아옴
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`; // page 1(landingpage이므로)
        fetchMovies(endpoint)
    }, [])

처음 landingpage에선 page 1이라는 뜻이다

 

loadMoreItems 코드는 아래와 같다

    const loadMoreItems = () => {
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=${CurrentPage + 1}`; // page 2, 3, 4,,,
    
        fetchMovies(endpoint)
    }

버튼을 누르면 현재 페이지 + 1 해서 영화를 20개씩 업데이트하여 보여준다

 

 

결과창

클릭 전

클릭 후 (스크롤 길이 변화)