[@mui/x-data-grid-premium] 계층구조 설계 예시

회사 프로젝트에서 MUI DataGrid를 사용하면서 개발중이나 유지보수 때 가독성과 확장성을 고려한 Grid 전용 계층 구조를 정리해 보겠다. 

 

 

<계층구조>

View

  ↓

Grid 컴포넌트

  ↓

공통 DataGrid 래퍼

  ↓

gridConfig

  ↓

util

 

각각 설명을 하자면

View는 말 그대로 화면 컨테이너 파일이고 레이아웃 구성과 gridParam, gridRef 관리를 하는 페이지이다. 이 페이지에서는 API를 직접 호출하거나 그리드 이벤트, 컬럼 정의 등을 하지 않고 완전히 분리시킨 화면 껍데기이다.

 

Grid 컴포넌트는 화면별 그리드 로직 파일을 의미하고 그리드 하나당 하나의 파일로 관리할 예정이기 때문에 하나의 View 파일에 여러개의 그리드를 사용한다면 여러개의 Grid컴포넌트 파일이 생길수 있겠다.

 

 공통 DataGrid 래퍼란 mui 라이브러리에서 그리드를 랜더링하는 API를 호출하는 역할을 분리시킨 파일이다. 이 파일은 프로젝트에 단 하나만 존재하며 화면별 조건분기 같은 로직은 존재하지 않는다. 나의 경우 css파일을 이 파일에만 적용시켜 공통 그리드 디자인을 적용했다.

 

gridConfig는 그리드 컬럼을 정의해둔 파일이고 특별한 로직이 따로 없고 단순 정적인 내용만 정의해둔 파일이다. 그리드 별로 컬럼이 다르기 때문에 그리드 하나당 하나의 파일이 나온다.

 

 

좀더 이해하기 쉬운 그림으로 보자면 아래와 같다. 

 

 

다음은 이 계층구조를 따른 파일구조 예시이다

src
 ├─ components
 │   └─ grid
 │       └─ example
 │           └─ exampleGrid.jsx  # 예시 그리드
 │       └─ CommonDataGrid.jsx   # 공통 MUI DataGrid 컴포넌트
 │
 ├─ constants
 │   └─ grid
 │       └─ example
 │           └─ exampleConfig.js  # 컬럼/옵션 설정
 │
 ├─ pages
 │   └─ example
 │       └─ examplePage.jsx       # 실제 페이지
 │
 ├─ styles
 │   └─ components
 │       └─ grid
 │           └─ CommonDataGrid.css
 │
 └─ utils
     └─ gridUtil.js               # Grid 유틸 함수