material-ui GridList & Tile

seunghyun_kim·2020년 8월 2일
0

material ui ( abbre. mui)

  • 기업에서 많이 사용한다는 react UI framework
  • layout잡을때 매우 편리한듯한 느낌이지만
    방대하고 다양한 기능들이 존재하기 때문에 아직 아주미숙하여 아주불편함
  • 기능하나 사용시마다 import해야함

GridList ( cardList와 같은 느낌)

먼저 임뽈탄떼 임폴뜨

import { GridList, GridListTile} from '@material-ui/core';

Grid의 시작은 container로 시작하는게 심신안정에 이롭다.

maxWidth속성으로 깔아줄 Grid들의 운동장크기를 잡아줘야함

mui에서 breakpoints (xl, ls, md, sm, xs) 요것들로 웹에서 보여질 크기와 함께 어썸한 반응형웹이 가능하다. (추후작성예정)

<Container maxWidth="lg">

return 위에 설정해준 값들

아래와 같이 cellHeight, cols, spacing, component 속성으로
한 칸을 잡아준다.
(화장실 타일 한칸느낌, 그 타일의 겉 테두리를 잡아준다는 느낌)

위와같이 반응형을 고려하여 크기를 잡아준다. ( 정수로 작성 )

GridList Cols={4} vs GridListTile Cols={4} diff

  • list cols 는 tile의 갯수
  • tile cols 는 breakpoint의 속성
<GridList cellHeight={imgHeight} cols={colCount} spacing={4} component="div">

다음으로, 자식으로 GridListTile을 작성. 타일 한칸의 속성을 잡아준다.
(타일의 알맹이?의 속성을 잡는느낌)

<GridListTile cols={1} rows={1} >

cols와 rows는 문자처럼 행과 열을 의미

하지만, 크기의 속성(width, heigh)이 아니다.

mui width의 최대값 12, 중 몇을 차지하는가? 이런느낌

mui는 부모의 말을 잘듣는다

  • 부모의 크기속성을 아주 잘따른다
  • 부모 자식관계의 속성들을 사용하면서 파악해야한다 (container,item 등등 투매니)
  • 반응형을 위해서 무의미한 breakpoint남발은 clean하지못함.

0개의 댓글