[ React ] React 프로젝트에 MUI 설치 및 상단바 추가해보기

■ MUI 란 ?

• 프로토타이핑과 제품개발에 가장 많이 활용되는 인터랙티브 컴포넌트 기반의 React Ui 라이브러리

---

■ 리액트 프로젝트에 MUI 설치하기

• 리액트 프로젝트 내에 터미널 환경에서 아래 커맨드를 순차적으로 입력해준다.

// MUI 리액트 패키지 설치

npm install @mui/material @emotion/react @emotion/styled

// 스타일 컴포넌트 설치
% npm install styled-components

// MUI 아이콘 패키지 설치
% npm install @mui/icons-material

---

■ MUI Docs 페이지에서 상단바 코드 가져오기

- 아래는 MUI Appbar 링크

- 필자는 " Responsive App bar with Drawer " 적용

https://mui.com/material-ui/react-app-bar/#app-bar-with-menu\

App Bar React component - Material UI

 

■ 마음에 드는 Appbar 선택 후 프로젝트 내에 코드 붙여넣기 

• 하단에 show code 버튼을 통해 코드를 볼 수 있다.

---

• 프로젝트에서 Appbar 라는 새로운 파일을 만들어 코드를 붙여넣기 해준다.

 

** 아래 코드는 필자에 맞게 조금 커스텀한 코드이다

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import Divider from '@mui/material/Divider';
import Drawer from '@mui/material/Drawer';
import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import MenuIcon from '@mui/icons-material/Menu';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

interface Props {
  /**z
   * Injected by the documentation to work in an iframe.
   * You won't need it on your project.
   */
  window?: () => Window;
}

const drawerWidth = 240;
const navItems = ['Home', 'About', 'Contact'];

export default function Appbar(props: Props) {
  const { window } = props;
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen((prevState) => !prevState);
  };

  const drawer = (
    <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
      <Typography variant="h6" sx={{ my: 2 }}>
        Hobby Gallery
      </Typography>
      <Divider />
      <List>
        {navItems.map((item) => (
          <ListItem key={item} disablePadding>
            <ListItemButton sx={{ textAlign: 'center' }}>
              <ListItemText primary={item} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  const container = window !== undefined ? () => window().document.body : undefined;

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar component="nav">
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h6"
            component="div"
            sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
          >
            Hobby Gallery
          </Typography>
          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
            {navItems.map((item) => (
              <Button key={item} sx={{ color: '#fff' }}>
                {item}
              </Button>
            ))}
          </Box>
        </Toolbar>
      </AppBar>
      <nav>
        <Drawer
          container={container}
          variant="temporary"
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true, // Better open performance on mobile.
          }}
          sx={{
            display: { xs: 'block', sm: 'none' },
            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
          }}
        >
          {drawer}
        </Drawer>
      </nav>
      <Box component="main" sx={{ p: 3 }}>
        <Toolbar />
      </Box>
    </Box>
  );
}

 

• App.tsx 에 Appbar 컴포넌트를 불러온 후 저장한다

---

■ 저장 후 상단바 확인하기