[Material UI] Grid 사용하기

 

[Material UI_ Grid]

---

<STUDY>

 

❔ window size 구하기

  const [windowSize, setWindowSize] = useState(window.innerWidth);

  const handleWindowResize = useCallback(() => {
    setWindowSize(window.innerWidth);
  }, []);

  window.addEventListener("resize", handleWindowResize);

 

❔ 컴포넌트 만들기

const ComponentGrid = () => {
  let colNum = 4;
  if (windowSize < 1200) colNum = 3;
  if (windowSize < 900) colNum = 2;
  if (windowSize < 600) colNum = 1;

  return (
    <Grid container columns={colNum} spacing={3}>
      {productCategories.map(item => (
        <Grid item xs={1} key={item.id}>
          // 보여줄 item
        </Grid>
      ))}
    </Grid>
  )
}

 

   💡 첫 번째 Grid : container

      ❕ 몇 개의 column과 row로 배치할 것인지, item 사이의 공백은 얼마나 할 것인지 등을 나타낸다.

      ❕  columns : 열의 갯수 (default : 12)

      ❕ spacing : item 사이의 공백

 

   💡 두 번째 Gird : item

      ❕ xs : container의 얼만큼을 차지할 것인지를 나타낸다.

 

 

반응형으로 만들기 위해 함수로 만들어 주었다.

함수로 만들지 않고 colNum을 state로 만들어서 직접 넣어주어도 된다.

 

---

 

Flex와 Grid 모두 적절한 상황에서 사용하면 좋은데 어떤 상황에 어떤 것을 사용해야 하는지 헷갈릴 때가 많다.

 

이번에는 제품을 추가하면 제품 목록도 하나씩 추가되어야 하는 작업을 진행했다.

처음에는 flex를 사용하여 구현하였지만 화면에 꽉 차도록 예쁘게 배치하는 것이 어려웠다.

특히 반응형으로 제작하는 과정에서 자꾸 margin이 생겨 한쪽으로 쏠리는 현상이 일어나게 되어 Grid를 사용해 보게 되었다.

 

아직도 Flex와 Grid를 사용하는 상황이 한번에 보이지는 않지만

조금씩 연습해서 자유자재로 사용할 수 있게 노력해야겠다.

 

---

 

<자세한 내용은 MUI 공식 홈페이지를 확인해 주세요>

 

Grid API - Material UI