MUI 적용 가이드 - React 프로젝트에 MUI 통합하기

MUI 적용 가이드: React 프로젝트에 MUI 통합하기

Material UI(MUI)는 React 기반 프로젝트에 멋진 UI 구성 요소를 손쉽게 추가할 수 있게 해주는 인기 있는 라이브러리입니다. 이 가이드에서는 MUI의 기본 개념부터 실제 React 프로젝트에 적용하는 방법까지 담백하고 핵심적인 내용을 다룹니다.

MUI란 무엇인가?

MUI는 Material Design 원칙을 기반으로 한 React 컴포넌트 라이브러리입니다. 개발자가 고품질의 UI를 빠르게 구축할 수 있도록 다양한 미리 만들어진 컴포넌트를 제공합니다. MUI를 사용하면 애플리케이션의 일관성과 접근성을 향상시키면서 개발 시간을 크게 단축시킬 수 있습니다.

MUI의 작동 원리

MUI는 React의 구성 요소 기반 아키텍처를 활용하여, 앱의 다양한 부분에 재사용 가능한 UI 컴포넌트를 제공합니다. 각 컴포넌트는 Material Design 지침에 따라 세심하게 설계되었으며, 커스터마이징이 용이하도록 다양한 props와 테마 옵션을 지원합니다.

TSX에서 MUI 세팅하는 방법

1. 의존성 설치: 프로젝트에 MUI를 추가하기 위해, 먼저 필요한 패키지들을 설치합니다.

   yarn add @mui/material @emotion/react @emotion/styled
   yarn add @mui/icons-material
   

2. MUI 컴포넌트 사용: 설치가 완료되면, MUI 컴포넌트를 임포트하여 사용할 수 있습니다.

   import Button from '@mui/material/Button';
   

섹시한 네비게이션 만드는 방법

1. 네비게이션 바 구성: AppBar 컴포넌트와 관련 컴포넌트들을 사용하여 네비게이션 바를 구성합니다.

   import AppBar from '@mui/material/AppBar';
   import Toolbar from '@mui/material/Toolbar';
   

2. 커스텀 테마 적용: createTheme과 ThemeProvider를 사용하여 네비게이션 바의 스타일을 커스터마이즈합니다.

   import { createTheme, ThemeProvider } from '@mui/material/styles';
   
   const customTheme = createTheme({
     palette: {
       primary: { main: "#007FFF" },
     },
   });
   

3. 가독성 개선: 코드의 가독성을 높이기 위해 스타일링과 테마 설정 코드를 별도의 파일로 분리하고, 반복되는 부분은 map 함수를 사용하여 간결하게 표현합니다.

네비게이션 바 구성

NavigationBar 컴포넌트를 생성하여 MUI 컴포넌트를 사용해 네비게이션 바를 구성합니다. AppBar 컴포넌트를 사용하여 네비게이션 바의 기본적인 틀을 설정하고, Toolbar 안에 다른 요소들을 배치합니다.

AppBar 설정

AppBar 컴포넌트는 네비게이션 바의 백본을 형성합니다. position="static" 속성을 사용하여 스크롤 시에도 항상 상단에 고정되지 않고, 컨텐츠 스크롤에 따라 움직이게 설정합니다. color="inherit"를 통해 부모 요소의 색상을 상속받습니다.

커스텀 테마 적용

MUI의 createTheme와 ThemeProvider를 사용하여 네비게이션 바의 스타일을 커스터마이즈합니다. 여기서는 백그라운드를 하얀색으로, 주요 색상을 #007FFF로 설정합니다. 또한, 네비게이션 바의 하단에는 1px 두께의 회색 테두리를 추가하여 시각적 구분을 강화합니다.

컴포넌트 스타일링

Container 컴포넌트를 사용하여 네비게이션 바의 내용을 중앙에 위치시키고, Toolbar 컴포넌트 내에서 Box, Typography, IconButton, Button을 사용하여 로고, 메뉴 아이콘, 네비게이션 링크를 배치합니다. IconButton에는 MenuIcon을 사용하여 메뉴 버튼을 제공합니다.

네비게이션 링크

RouterLink를 Button 컴포넌트의 component prop으로 사용하여 SPA 내에서의 라우팅을 처리합니다. map 함수를 사용하여 네비게이션 링크를 동적으로 생성합니다, 이는 코드의 재사용성을 높이고 가독성을 개선합니다.

코드 예시

import React from "react";
import { Link as RouterLink } from "react-router-dom";
import { AppBar, Toolbar, Typography, Button, Container, Box, IconButton } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const NavigationBar: React.FC = () => {
  const customTheme = createTheme({
    palette: {
      background: { default: "#ffffff" },
      primary: { main: "#007FFF" },
    },
    components: {
      MuiAppBar: {
        styleOverrides: {
          colorInherit: {
            backgroundColor: "#ffffff",
            color: "#007FFF",
            boxShadow: "none",
            borderBottom: "1px solid #e0e0e0",
          },
        },
      },
    },
  });

  return (
    <ThemeProvider theme={customTheme}>
      <AppBar position="static" color="inherit">
        <Container maxWidth="lg">
          <Toolbar disableGutters>
            <Box sx={{ flexGrow: 1, display: "flex", alignItems: "center" }}>
              <IconButton size="large" edge="start" color="inherit" aria-label="open drawer" sx={{ mr: 2 }}>
                <MenuIcon />
              </IconButton>
              <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, color: "primary.main" }}>
                내 앱
              </Typography>
            </Box>
            {["/", "/settings", "/shortcuts", "/clipboard"].map((path, index) => (
              <Button key={index} color="inherit" component={RouterLink} to={path} sx={{ color: "primary.main" }}>
                {["홈", "설정", "단축키 설정", "클립보드"][index]}
              </Button>
            ))}
          </Toolbar>
        </Container>
      </AppBar>
    </ThemeProvider>
  );
};

export default NavigationBar;

이 가이드를 통해, MUI를 활용하여 React 프로젝트에 세련되고 현대적인 네비게이션 바를 쉽게 추가할 수 있음을 알 수 있습니다. MUI의 다양한 컴포넌트와 스타일링 옵션을 통해, 개발자는 사용자 경험을 향상시키는 동시에 개발 과정을 간소화할 수 있습니다.