useSearchParams

데이터 목록 ui 공통 컴포넌트, 훅으로 관리하기

관리자 웹, CMS를 개발할 때 데이터 목록을 많은 페이지에서 보여준다. (예시: shadcn/ui table)Next.js 에서 이 데이터 목록 ui를 공통 컴포넌트, 훅으로 따로 빼서 중복을 줄이고 개발 시간을 빠르게 해봤다.구성데이터 목록 ui는 크게 3가지 영역으로 나눌 수 있다.필터검색어, 상태, 기간, 목록 건수 등 데이터 필터링 액션테이블데이터를 목록 형태로 보여줌페이지네이션데이터 목록 페이지 이동 액션필터, 페이지네이션 영역에서 사용자 액션이 발생 시 테이블에서 보여주는 데이터가 변경되어야 한다.react만 사용한다면 context로 3개 영역을 묶고 데이터를 공유하는 식으로 구현할 수 있다.Next.js를 사용할 때는 다른 방식을 사용할 수 있다. 사용자 액션 발생시에 url search..