![]()
Pagination component 사용 시 아래와 같이 사용한다 const [currentPage, setCurrentPage] = useState(1); const [lastPage, setLastPage] = useState(0); // api 통신 후 값을 업데이트 해줌 const onChangePage = (newPage: number) => { setCurrentPage(newPage) } ... return ( ... ... ) Pagination component에서는 currentPage, lastPage, 페이지를 업데이트할 수 있는 함수를 전달받는다 currentPage와 lastPage가 업데이트될 때마다 화면에 보여줄 페이지 리스트를 계산해 줬다 👍 page가 1페이지인 경우 더..
![]()
Infinite scroll(무한 스크롤)이란? 사용자가 페이지 하단에 도달했을 때, 콘텐츠를 추가로 제공하는 것이다. 사용자 입장에서 페이지를 따로 넘겨야 할 필요가 없어 편리하다. 구현할 수 있는 방법이 여러 가지였다. - scroll - getBoundingClientRect() - Intersection Observer - useRef scroll 이 방식은 스크롤할 때마다 이벤트가 발생하므로 throttle(일정 시간 동안의 이벤트 실행을 막고, 입력을 모아서 일정 시간이 지날 때마다 한 번씩 출력하는 것)로 성능 최적화를 해줘야 한다. scroll을 이용한 구현 방법은 아래에 잘 설명되어있다. https://ghur2002.medium.com/react%EC%97%90%EC%84%9C-infi..
![]()
원티드 프리온보딩 프런트엔드에 지원하며 과제로 캐러셀을 만들어봤다. 결과는 불합격했다. 변명을 하자면 남은 시간이 이틀이었고 네비 바를 꼼꼼하게 만들다가 시간이 부족했다. 솔직히 내 실력이 충분했다면 충분히 완성할 수 있지 않았을까? 그래서 캐러셀을 다시 정리해보기로 했다. 조건 라이브러리 없이 만들기 버튼 클릭 시 넘어가기 무한 캐러셀로 마지막 이미지일 경우 다시 처음으로 돌아가기(첫 이미지일 경우 마지막 이미지로) 5초 뒤에 자동으로 이미지 넘기기 한 번에 이미지가 3개씩 보이도록 무한으로 이미지를 넘기기 위한 방식은 다음과 같다. 나는 총 9장의 이미지를 사용하고 양 옆의 이미지가 조금씩 보여야 하므로 앞쪽에 8,9번 이미지를 추가해주고 뒤쪽에 1,2번 이미지를 추가해준다. 여기 1번 이미지에서 왼..
