![]()
입점사 프로젝트를 진행하며 페이지네이션과 함께 많이 쓰인 것은 필터일 것이다! 각 페이지에서 데이터를 조회하기 위해 필터와 페이지네이션이 사용되었다. 각각의 페이지마다 필터 컴포넌트로 만들면서 그에 대한 로직이 반복되어 이를 개선하고 뒤로가기 또는 새로고침 시 필터값을 유지하는 방법을 알아보겠다! 필터 컴포넌트와 필터 관련 hook 구현하기 필터 컴포넌트 초기 필터값들과 검색, 초기화 시 동작되는 함수를 전달 받는다. 사용자가 입력한 필터값을 내부적으로 관리한다. src/components/filter/deliveryTemplateFilter.tsx interface DeliveryTemplateFilterProps { initialFilterValues: FormState onSubmit: (filte..
상품 리스트에서 상세 상품을 본 후 뒤로 가기 시 원래 스크롤 위치를 기억했다가 보여주고 싶었다. 1. scroll 이벤트가 발생 시 해당 scrollTop의 값을 session에 저장 여기서 scroll이 발생 시마다 session에 값이 저장되는 것은 낭비이다. throttle를 이용해 마지막 이벤트가 발생하고 일정 시간(400ms)이 지나기 전까지 다시 호출되지 않도록 막아줬다. document.addEventListener('scroll', () => { if (!timer) { timer = setTimeout(() => { timer = null; const scrollValue = document.documentElement.scrollTop; sessionStorage.setItem("ma..
