[React 컴포넌트] 더 보기(Load More) 버튼 만드는 법

우리가 더 보기 버튼을 만들어줄 페이지는 useEffect()로 초기 데이터를 불러와 데이터를 state에 저장하고, map()으로 해당 데이터들을 화면에 보여주고 있는 페이지이다.

 

더 보기 버튼을 만들려면

1. JSX로 더 보기 버튼을 만든다.
2. 현재 페이지 수를 저장할 state를 준비한다. API에 (현재 페이지 + 1) 에 해당하는 데이터를 요청할 때 사용할 것이다.
3. loadMore 함수를 작성해서 onClick으로 등록한다. 버튼을 클릭할 때마다 (페이지 + 1)의 데이터를  fetch하고 기존 데이터가 저장된 state에 새 데이터들을 덧붙인다. (destrcturing 문법 혹은 concat() 이용)
4. 그러면 state가 변경되면서 자동으로 loadMore로 불러온 데이터들도 화면에 덧붙여서 보이게 된다.

const [Books, setBookss] = useState([]);
const [CurrentPage, setCurrentPage] = useState(0);

useEffect(() => {
    const endpoint = `...?page=1`;
    fetchBooks(endpoint);
}, []);

const fetchBooks = (endpoint) => {
    fetch(endpoint)
        .then(response => response.json())
        .then(data => {
            setBooks([...Books, ...data.results]);
            setCurrentpage(data.page);
        });
};

const loadMoreItems = () => {
    const endpoint = `...?page=${currentPage + 1}`;
    fetchBooks(endpoint);
};

return (
	{/* map()으로 이미지 카드 렌더링하는 부분 */}

	<button onClick={loadMoreItems}>Load More</button>
)

loadMoreItems에서 바로 fetch를 하지 않고 함수를 따로 분리한 이유는 맨 처음 useEffect()에서 초기 데이터를 불러올 때도 사용하기 위함이다.