모듈화
반복되는 UI 요소를 컴포넌트화 하기
관리자페이지는 유저 리스트를 검색하는 페이지가 많다(회원리스트, 사전예약신청유저리스트, 유저랭킹리스트 등). 그래서 검색창과 리스트 테이블을 반복적으로 사용하게 되는데, 처음 구현할 때는 공통 컴포넌트로 쓰지 않고 개별적으로 컴포넌트를 생성했었다. 그런데, 코드리뷰를 받으면서 이 반복적으로 사용하는 컴포넌트를 모듈화하여 공통적으로 사용하면 좋겠다는 말씀을 해주셨다.
여러가지 조건을 검색하는 검색창과 그 결과를 나타내는 리스트 테이블은 페이지별로 모양이나 기능은 같고, 구성 항목들만 조금 다르게 구성되어 있다. 따라서 페이지에 필요한 검색창의 항목과 테이블의 항목을 컴포넌트의 props로 넘겨주어 공통컴포넌트(혹은 모듈화) 하였다.
이외에도 컴포넌트 구성에 필요한 변수들은 props로 넘겨주었다.
모듈화하여 사용하는 table과 search
유저리스트 페이지에서 table과 serach 컴포넌트를 활용한 예시
공통 컴포넌트로 만들기 위한 여러가지 props
자주 쓰이는 컴포넌트를 모듈화하면서 어려운 부분이 있었다. Search와 Table 컴포넌트는 공통으로 쓰이는 컴포넌트이지만, 각 페이지에서 유저가 검색창에 입력한 정보는 페이지 별로 독립적이다. 또, 유저가 검색창에 입력하는 정보를 redux를 사용해 전역으로 관리하기 때문에, 각 페이지에 맞는 store의 값을 전달해야했다.
Search 컴포넌트에서 유저가 검색창에 입력하는 정보는 filters라는 객체에 담기고 이 객체를 store에서 전역변수로 관리한다. 또한, filters 객체는 모든 페이지에서 공통으로 사용하는 변수가 아니라, 페이지별로 독립적으로 관리되고 있다.
Redux 폴더 내 페이지 별 filters
filters 값이 컴포넌트내에서 어떻게 사용되는가 하면, 먼저 select, input 태그의 onChange 속성에서 값을 입력할 때마다 filters를 업데이트 해주고, value 속성에는 filters에 저장된 값을 부여해 초기화 버튼을 구현하거나 다른 페이지에 다녀와도 값이 반영되게 한다. 결국, store로부터 초기화함수, 업데이트함수, state값 들을 각 페이지에 맞게 불러와야하는데, 처음엔 useParams 훅을 사용하는 방법으로 구현해봤다. 현재 페이지에 대한 url 정보를 변수로 가져와서 이 변수를 사용해 페이지에 맞는 값을 가져오려 했다.
const filters = useSelector((store) => {
switch (page) {
case 'userinfo':
return store.userFilter;
case 'preuser':
return store.preUserFilter;
case 'rankuser':
return store.rankUserFilter;
default:
return;
}
});위에 코드처럼, page라는 변수를 useParams를 통해 가져오고 그 값에 맞춰 페이지에 맞는 값을 가져오는 것이다. 그러나, 사전예약 페이지의 경우 페이지안에 4개의 Taps이 존재하는 구조로 되어 있는데, 이 때문에 useParams를 이용하는 방법은 어렵다고 판단했다. 왜냐하면 tap을 클릭할 때 UI가 변경되기는 하지만 url은 변경되지 않는 구조라, useParams를 사용하려면 다시 페이지의 구조를 바꿔야했다.
메뉴탭 4개로 구성되어 있는 사전예약 페이지
결국, Search 컴포넌트를 불러오는 부모 컴포넌트 단에서 page에 대한 정보를 props로 넘기는 방식을 선택해 구현하였다.
