날짜별 페이지네이션
- 목표 : 날짜 마다 장소를 추가할 수 있는 화면을 구현하기
- dates = ["2023-08-23","2023-08-24","2023-08-25"]
- dates는 날짜가 하나씩 담긴 배열로 이루어져 있다.
const [currentPage, setCurrentPage] = useState(0);
const handleNextPage = () => {
setCurrentPage(currentPage + 1);
};
const handlePreviousPage = () => {
setCurrentPage(currentPage - 1);
};
...
return (
...
<button
onClick={handlePreviousPage}
disabled={currentPage === 0}
className="cursor-pointer disabled:text-transparent disabled:cursor-none"
>
⬅️
</button>
<h1>{dates[currentPage]}</h1>
<button
onClick={handleNextPage}
disabled={currentPage === dates.length - 1}
className="cursor-pointer disabled:text-transparent disabled:cursor-none"
>
➡️
</button>
...
)
- 페이지넘버 state를 만들고, 페이지넘버를 증감시키는 함수를 만들었다.
- <h1> 태그 안에는 현재 페이지에 해당하는 날짜를 표시해주었다.
- 양 옆의 화살표를 누르면 페이지넘버가 바뀌면서 표시되는 날짜도 변경된다.
- 변경된 날짜마다 밑에 보여주는 정보를 다르게 한다.
- 위의 사진과 같이 장소에 대한 정보를 날짜별로 다르게 저장한 내용을 보여주어야 하기 때문에 해당 컴포넌트에 currentPage 정보를 props로 전달해준다.
- 전달 받은 currentPage를 인덱스로 활용해서 해당 날짜에 일치하는 정보를 불러오도록 한다.
- 내가 화면에 보여준 데이터의 형식은 [[2023-08-23에 관한 장소정보], [2023-08-24에 관한 장소정보], [2023-08-25에 관한 장소정보]] 이런 식으로 이루어져 있어서 currentPage를 인덱스로 사용할 수 있었다.
