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

커스텀 훅으로 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다. - 공식 문서 예를 들어 상태 변수중에 컴포넌트가 마운트되고 data를 fetch해서 useEffect에서 상태값을 변경해줘야 하는 경우에 사용할 수 있다. 적용 현재 진행하고 있는 프로젝트에서, 많은 페이지에서 검색 필터 팝업을 공통적으로 활용하고 있다. 현재 검색 필터 팝업은 외부를 클릭했을 때 팝업창이 닫히지 않는 문제가 있어서, PM님이 이 부분을 해결해달라고 했다. 기존의 로직은 컴포넌트에서 열림 상태를 관리한다. isOpen && , 이런 식으로 버튼 눌렀을때 isOpen을 true로 만들고 팝업이 뜨게 하는 로직이다. 이 팝업창의 외부를 클릭시 닫히게 하기 위해서 2가지 방법을 고려했다. 1) 외부에 투명배경의 viewport..