목록리액트 페이지네이션 (1)
너와 나의 프로그래밍

Pagination 기능은 정말 프론트엔드 개발에 있어서 피할 수 없는 개발중에 하나라고 생각한다. 항상 개발을 할 때 마다 페이징 처리가 은근히 어렵다는걸 항상 느끼는데 구글링을 해봐도 각자 방식이 너무 다를뿐더러 너무 코드도 뒤죽박죽이라 최대한 깔끔하게 최대한 쉽게 구현을 해봤다. 개발 환경은 React.js와 Typescript를 기본적인 디자인은 Styled Component를 사용했다. 조건 🤔 다양한 페이지네이션의 조건들이 있지만 이번에 구현해본 조건은 아래와 같다. 한 페이지 안에 10개씩 보여주기 페이지의 번호는 5개씩 보여주기 페이지 번호를 눌렀을 때 해당 페이지를 보여주기 페이지 번호의 양 옆에 뒤로 건너뀌기, 뒤로 가기 / 다음 페이지로 가기, 앞으로 건너뛰기 첫 시작과 맨 끝으로 갔..
Front-End/Next.js & React.js
2023. 4. 2. 16:07