React - Grid

※본 블로그에서는 MUI를 이용하여 Grid를 구현하였다

Grid

정의

Grid란 가로 세로 방향으로 컴포넌트의 배치를 가능하게 하는 2차원 레이아웃 시스템이다
MUI에서의 Grid는 더 높은 유연성을 위해 CSS FlexBox¹를 기반으로 작동된다

특징

스마트폰(xs), 태블릿(sm), 데스크톱(md, lg, xl) 별 UI 설정이 가능하다
각 줄은 12개의 컬럼으로 표시되며 해상도 별로 원하는 개수로 띄울수 있다
- 예시 xs={6} : 12/6=2로 각 줄별로 2개씩 데이터를 표시한다
Flexbox 기반의 다양한 방식의 값 적용이나 순서 반대로 띄우기 등 다양한 방식의 콘텐츠 정렬이 가능함

사용 방법

container 프롭을 이용하여 그리드 컨테이너를 생성한다
- Grid Item 컴포넌트는 항상 Grid 컨테이너 내부의 아이템에 존재해야하며, item을 명시해야 함
아이템별 간격의 경우, container 내부에 **spacing={3}**와 같이 값을 넣어 간격을 줄 수 있다
그리드 내부에서 아이템 배치 위치 등을 하기 위해서는 sx={{}} 내부에 코드를 넣어주면 적용이 가능하다
아이템의 크기 설정은 공용 크기인 size와 각 디바이스별 해상도(xs, sm, md, lg, xl)별로 설정이 가능하며, 크기에 flexGrow를 넣어줄 경우, 자동으로 크기가 지정된다

예시 코드

<Grid container>
    <Grid item xs={6}> <Typography>Hello</Typography> </Grid>
</Grid>

이 코드에서 xs는 아이템의 길이를 의미한다

한줄은 기본값으로 12의 크기를 가지며, 아이템의 size가 6을 가질 경우, 12/6=2로 컨테이너의 절반의 크기를 가지게 된다

이 한줄의 크기는 **columns={10}**와 같이 부모 그리드 컨테이너에서 크기 설정이 가능하다

xs, sm, md, lg, xl의 다양한 해상도별 크기 설정이 가능하다

이런식으로 사용이 가능하다

    <Container maxWidth="md">
    <Grid container rowSpacing={1}
        columnSpacing={{ xs: 1, sm: 2, md: 3 }}
        sx={{
                justifyContent: "flex-start",
                alignItems: "center", // 아이템 수직 중앙 정렬
                padding: "20px",
                display: "flex",     // 디폴트값
                flexWrap: "wrap",    // 줄바꿈 허용
        }}>

            {tempData.map((item) => (
                <Grid
                    item
                    key={item.id}
                    xs={6}
                    sm={4}
                    md={3} 
                >
                <Box sx={{
                        border: '1px solid #ddd',
                        borderRadius: '4px',
                        padding: '20px',
                        textAlign: 'center',
                        height: '100px',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center', 
                        width: '100px',
                        wordBreak: 'break-word', //텍스트가 벗어날때 자동으로 줄 바꿈
                        overflow: 'hidden',
                    }} onClick={() => alert(`실행됨 ${item.id}`)}>
                        <Typography variant="h6">{item.title}</Typography>
                        <Typography variant="body2">{item.content}</Typography>
                </Box>
                </Grid>
            ))}
        </Grid>
    </Container>