[Material-UI 실습] 3. Box 컴포넌트

Material-UI에서 제공하는 Box 컴포넌트 실습을 진행한다. BoxTutorial 컴포넌트를 생성해 Main.js에서 불러오고 BoxTutorial 컴포넌트에서 Box 컴포넌트를 이용한다. Box 컴포넌트는 컴포넌트를 감싸는 역할을 하는데 주로 CSS의 사용성을 더 높이기 위해 사용된다. 이를 확인하기 위해 예제를 작성해보았다.

 

BoxTutorial.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button'
import Box from '@material-ui/core/Box';
class BoxTutorial extends Component {
  render() {
    return (
      <div>
        <Box clone color="primary.main" m={5}>
          <Button>Button 1</Button>
        </Box>
        <Box color="primary.main" m={5}>
          <Button>Button 2</Button>
        </Box>
        <Box component="span" m={5}>
          <Button>Button 3</Button>
        </Box>
      </div>
    );
  }
}
export default BoxTutorial;

화면은 다음과 같다.

화면 결과

 

Box 컴포넌트는 특정 컴포넌트를 감싸면서 스타일을 적용시키는데 자주 사용한다. 첫 번째와 두 번째 Box 컴포넌트에서 color라는 속성에 특정 색에 해당하는 값을 설정했는데, 첫 번째 Box 컴포넌트에만 색이 적용되었다. 첫 번째 Box 컴포넌트와 두 번째 Box 컴포넌트의 차이는 clone이라는 속성 유무이다. Box 컴포넌트에 clone이라는 속성을 추가하면 React.cloneElement()이라는 메소드를 사용하게 된다. 이 경우 Box 컴포넌트에서 설정한 스타일이 Button에 적용되고 스타일을 적용한 새로운 컴포넌트를 최종적으로 반환한다. 따라서 첫 번째 Box 컴포넌트에는 색이 적용되었으나 두 번째 Box 컴포넌트에는 색이 적용되지 않는다. 실제로 크롬 개발자 도구에서 element들을 보면 다음과 같이 최종적으로 반환한 태그가 자체가 다르고 첫 번째의 button에만 색 스타일이 적용된다.

 

크롬 개발자 도구로 확인한 최종적으로 사용된 태그

Box 컴포넌트의 clone 속성을 사용할 때 한 가지 주의할 점은 BoxTutorial.js에서 Box를 제일 마지막에 import 해야 그 적용이 된다는 점이다. 만약 Button을 Box보다 더 밑의 코드에서 import한다면 Button에 스타일이 적용이 안된다. 처음에 이런식으로 import를 해서 clone 속성이 적용이 안되나보다라고 생각했는데 같은 문제를 겪는 사람들이 많았다.

 

https://github.com/mui-org/material-ui/issues/15993

Box clone not overriding child component styles · Issue #15993 · mui-org/material-ui

 

세 번째 Box 컴포넌트를 사용한 화면에서는 span 태그를 최종적으로 사용했다. 이는 Box 컴포넌트의 component 속성에 span으로 설정했기 때문이다. Component에 원하는 태그를 입력하면 해당하는 태그를 최종적으로 사용한다. 기본적으로는 div 태그이다.

 

Material-UI의 컴포넌트에서 색을 적용할 때 style에 속성을 넣는 방법말고 color라는 속성 자체에 색을 정의하는 방식을 주로 이용한다. Box 컴포넌트 코드를 보면 color="primary.main" 이런식으로 색을 적용한다. Material-UI 컴포넌트의 색을 적용하기 위해서는 Style과 Color 개념을 알아야한다. 다음에는 이를 공부하겠다.

 

Box 컴포넌트의 관한 설명은 여기를 참고하였다.

https://material-ui.com/components/box/

Box React component - Material-UI

예제 확인

https://jb-material-ui-tutorial.herokuapp.com/

Material UI Tutorial