반응형 프론트엔드66 함수형 컴포넌트에서 제네릭 사용하기 MUI의 DataGrid 컴포넌트를 사용하면서 기본 설정값들을 매번 써주는게 귀찮아졌다. 한번 감싸서 BaseItem만 받을 수있는 그리드 컴포넌트를 만들기로 했다. 클래스 구조에서는 제네릭을 사용해봤는데 함수형에서는 제네릭을 처음 사용해서 조사해봄 1. 일단 props에 제네릭을 적는다. DataGridProps 라고 이름짓고 제네릭을 적용한다. export interface DataGridProps { rows: ItemType[]; setRows: React.Dispatch; } 2. 컴포넌트에 제네릭을 적고 props와 연결한다. MyDataGrid 컴포넌트는 제네릭 컴포넌트가 됐다. MyDataGrid는 BaseItem을 상속하는 데이터만 받을 수 있다. MyDataGrid에서 전달한 제네릭 값.. 2022. 12. 5. [MUI] 그리드 컬럼 헤더 높이 조정 그리드 컬럼 그룹이 일부만 존재하는데도 공간(높이)를 너무 많이 차지해서 높이를 줄여주고 싶었다. renderHeaderGroup 속성을 통해 높이를 변경해 봤는데 내부 content의 높이만 변경되지 MUI에서 관리하는 컨테이너 높이는 수정되지 않음 DataGrid에 속성을 찾아보니까 density라는게 있음 compact로 설정하니까 어느정도 만족스럽다. 기존에 한줄일떄도 컬럼 헤더가 너무 큰 느낌이 있었음 근데 좀... 이상한게 footer는 같이 안줄어든다. 그래서 클래스 덮어써서 높이 줄여줌 footer는 Selected Rows 나오고 페이징 나오는 부분을 말함 https://mui.com/x/api/data-grid/data-grid/#density DataGrid API - MUI X AP.. 2022. 12. 5. [MUI] 그리드 컬럼 헤더에 두줄 띄우는 방법 DataGrid 컴포넌트에 컬럼 그룹을 지정하는 기능이 있다. 그룹과 children 관계로 선언하는것으로 보인다. 그룹에 그룹을 children으로 넣음으로써 여러줄 넣기도 가능 columnGroupingModel https://mui.com/x/react-data-grid/column-groups/ Data Grid - Column groups - MUI X Group your columns. mui.com 2022. 12. 5. 리액트 리스트에 key가 필요한 이유 보호되어 있는 글 입니다. 2022. 12. 2. [MUI] DataGrid의 ScrollTo 기능 그리드에 데이터를 추가했을때 추가된 행으로 스크롤을 이동시키고 싶다. 애석하게도 ScrollTo 기능은 Pro 버전부터 지원한다. 직접 구현할 방법이 있을지 찾아봐야 되겠다. https://mui.com/x/react-data-grid/scrolling/#scrolling-to-specific-cells Data Grid - Scrolling - MUI X This section presents how to programmatically control the scroll. mui.com 동작 방식을 확인해봤는데 아무래도 직접 구현은 어려울것 같다. 이놈들이 내부적으로 Render 할 데이터를 그때그때 만들어 넣는걸로 보인다. 그러면 scrollTo를 먹일수가 없으니... 2022. 11. 30. [MUI] 그리드 key-value 변수를 객체에 입혀주는 방법 그리드에서 셀 데이터 변경 이벤트를 처리한다. id, field, value가 넘어온다. 찾아보니까 아래 코드 모양이 제일 예쁘다. map을 써서 조건문으로 바꾸고 싶은 값을 바꿔줌 근데 content라는 속성 key가 딱 정해져있지 않고 바뀐다. setData( data.map((it) => it.id === targetId ? { ...it, content: newContent } : it ) ); 기존 객체에 이렇게 입혀주고 싶다. key:value 형태는 안되나보다. 객체에 바로 key:value 형태로는 안써지는 듯 하여 object['key'] = value; 형태로 써야겠다 싶어서 아래 코드 처럼 BaseItem에 인덱스 시그니처 추가 interface BaseItem { [key: stri.. 2022. 11. 30. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음 반응형
