Material-UI를 사용한 리액트 스타일링

byCode Keeper •


Material-UI를 사용한 리액트 스타일링


리액트(React)는 사용자 인터페이스를 구축하기 위한 강력한 라이브러리입니다. 하지만 스타일링과 디자인 요소를 직접 구현하는 것은 많은 시간과 노력이 필요합니다. Material-UI는 이러한 문제를 해결해주는 리액트 컴포넌트 라이브러리로, 구글의 Material Design 가이드라인을 따르며 손쉽게 스타일링을 적용할 수 있도록 도와줍니다. 이 포스팅에서는 Material-UI를 사용하여 리액트 컴포넌트를 스타일링하는 방법을 자세히 살펴보겠습니다.


Material-UI의 중요성


Material-UI는 일관된 디자인 시스템을 제공하여 빠르게 애플리케이션의 UI를 구축할 수 있게 해줍니다. 이를 통해 개발자들은 디자인에 대한 걱정 없이 기능 구현에 집중할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.


프로젝트 설정 및 Material-UI 설치


Material-UI를 사용하기 위해 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 필요한 패키지를 설치합니다.


npx create-react-app my-material-ui-app
cd my-material-ui-app
npm install @mui/material @emotion/react @emotion/styled

프로젝트 구조


프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-material-ui-app/
├── src/
│   ├── components/
│   ├── App.js
│   ├── index.js
├── public/
├── package.json
└── README.md

이제 Material-UI를 사용하여 컴포넌트를 스타일링하는 방법을 살펴보겠습니다.


기본 컴포넌트 사용


Material-UI는 다양한 기본 컴포넌트를 제공합니다. 버튼(Button) 컴포넌트를 사용하여 기본적인 스타일링을 적용해 보겠습니다.


// src/App.js
import React from 'react';
import { Button } from '@mui/material';

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <Button variant="contained" color="primary">
        Primary Button
      </Button>
      <Button variant="outlined" color="secondary">
        Secondary Button
      </Button>
    </div>
  );
}

export default App;

위 코드에서는 Button 컴포넌트를 사용하여 두 개의 버튼을 렌더링합니다. variant와 color 속성을 사용하여 버튼의 스타일을 지정할 수 있습니다.


커스텀 테마 설정


Material-UI는 테마를 사용하여 전체 애플리케이션의 스타일을 일관되게 관리할 수 있습니다. 테마를 커스터마이징하여 애플리케이션의 디자인을 통일할 수 있습니다.


테마 생성


먼저, 테마를 생성하고 애플리케이션에 적용합니다.


// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
  },
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

위 코드에서는 createTheme 함수를 사용하여 테마를 생성하고, ThemeProvider 컴포넌트로 애플리케이션을 감쌉니다.


테마 적용


테마가 적용된 컴포넌트는 자동으로 테마 설정을 따르게 됩니다.


// src/App.js
import React from 'react';
import { Button, Typography, Container } from '@mui/material';

function App() {
  return (
    <Container style={{ textAlign: 'center', marginTop: '50px' }}>
      <Typography variant="h2" gutterBottom>
        Welcome to Material-UI
      </Typography>
      <Button variant="contained" color="primary" style={{ margin: '10px' }}>
        Primary Button
      </Button>
      <Button variant="outlined" color="secondary" style={{ margin: '10px' }}>
        Secondary Button
      </Button>
    </Container>
  );
}

export default App;

위 코드에서는 Typography와 Container 컴포넌트를 사용하여 텍스트와 레이아웃을 스타일링합니다. Typography는 텍스트의 스타일을 지정하고, Container는 레이아웃을 정렬합니다.


고급 스타일링


Material-UI는 고급 스타일링을 위해 makeStyles와 styled 함수를 제공합니다. 이를 사용하여 더욱 세밀한 스타일링을 적용할 수 있습니다.


makeStyles 사용


makeStyles를 사용하여 CSS 스타일을 정의하고 컴포넌트에 적용할 수 있습니다.


// src/App.js
import React from 'react';
import { Button, Typography, Container } from '@mui/material';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  root: {
    textAlign: 'center',
    marginTop: '50px',
  },
  button: {
    margin: '10px',
  },
  title: {
    marginBottom: '20px',
  },
});

function App() {
  const classes = useStyles();

  return (
    <Container className={classes.root}>
      <Typography variant="h2" className={classes.title}>
        Welcome to Material-UI
      </Typography>
      <Button variant="contained" color="primary" className={classes.button}>
        Primary Button
      </Button>
      <Button variant="outlined" color="secondary" className={classes.button}>
        Secondary Button
      </Button>
    </Container>
  );
}

export default App;

위 코드에서는 makeStyles를 사용하여 스타일을 정의하고, 컴포넌트에 클래스 이름으로 적용합니다.


styled 사용


styled 함수를 사용하여 스타일이 적용된 컴포넌트를 생성할 수 있습니다.


// src/App.js
import React from 'react';
import { Button, Typography, Container } from '@mui/material';
import { styled } from '@mui/system';

const StyledContainer = styled(Container)({
  textAlign: 'center',
  marginTop: '50px',
});

const StyledButton = styled(Button)({
  margin: '10px',
});

function App() {
  return (
    <StyledContainer>
      <Typography variant="h2" gutterBottom>
        Welcome to Material-UI
      </Typography>
      <StyledButton variant="contained" color="primary">
        Primary Button
      </StyledButton>
      <StyledButton variant="outlined" color="secondary">
        Secondary Button
      </StyledButton>
    </StyledContainer>
  );
}

export default App;

위 코드에서는 styled 함수를 사용하여 스타일이 적용된 Container와 Button 컴포넌트를 생성하고, 이를 사용하여 컴포넌트를 렌더링합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Material-UI를 사용하여 리액트 컴포넌트를 스타일링하는 방법에 대해 살펴보았습니다. Material-UI는 다양한 기본 컴포넌트와 고급 스타일링 기능을 제공하여 애플리케이션의 UI를 효율적으로 구축할 수 있게 해줍니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전