[nextjs]영화 프로젝트_ 인피니티 스크롤 구현

영화 목록을 불러올때 자꾸 20개만 불러오는 이슈 발생..

구글링도 해보고 네트워크 탭,콘솔로 계속 확인해보고 해도 계속 array는 20개..

 

그래서 애초에 api를 불러올때 경로를 보니까 내가 page를 숫자로 고정시켜놨던 것..

//현재 상영중
export const getMovies = async (page?:number) => {
    const res = await axios.get<MovieResponse>(
        `${BASE_URL}/movie/now_playing?api_key=${api_key}&language=ko-KR&page=1`
    );
    return res.data;
}

 

그러니까 페이지가 1인 영화 목록의 20개만 계속 고정으로,,,,

 

    const res = await axios.get<MovieResponse>(
        `${BASE_URL}/movie/now_playing?api_key=${api_key}&language=ko-KR&page=${page}`
    );

이렇게 동적으로 받아오게 변경했더니 

 

 

요로코롬 스크롤 할때마다 페이지가 늘어나면서 영화 목록이 불러와진다!