React에 MUI (Material-UI) 사용하여 리액트 화면 디자인 하기

1) 소개

Material-UI는 React 애플리케이션을 개발할 때 사용되는 인기 있는 UI 라이브러리 중 하나입니다.

라이브러리 설치만 하면 간편하게 적용할 수 있으며, Material-UI는 버튼, 텍스트 필드, 모달, 알림, 그리드 등 다양한 UI 컴포넌트를 제공합니다.

이 글에서는 Material-UI를 활용해 리액트 화면을 더 아름답게 디자인하는 방법을 소개합니다.

Material-UI를 사용하려면 공식 홈페이지(클릭 시 이동) 에서 제공하는 매뉴얼과 예제를 참조하면 좋습니다.

여기서는 npm으로 해당 패키지를 설치한 후, import하여 사용하는 방법을 설명하겠습니다.

먼저 관련 패키지를 설치해 줍니다.

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

mui/material패키지설치이미지

기존화면)

블로그boardList

기존의 볼품없는 블로그 게시판 페이지를 Material-UI의 Card 디자인을 이용해 수정해 보겠습니다.

활용예) 해당 사이트에 예시소드도 있습니다.

mui core Card활용예시

mui활용 예제소스

먼저, Material-UI의 컴포넌트를 import 합니다.

import { Card, Avatar, CardHeader, Typography } from '@mui/material';

import { red } from '@mui/material/colors';

import예제이미지

기존에는 단순히 div 영역에 데이터를 뿌려주었다면, 이를 아래와 같은 Material-UI 컴포넌트를 사용하여 Card 디자인으로 변경합니다.

기존소스

소스코드예제이미지

Material-UI를 적용한 소스:

위 코드를 적용하면 기존의 div 대신 Material-UI의 Card와 CardHeader 컴포넌트를 사용하여 보다 세련된 디자인으로 게시판을 구성할 수 있습니다.

Avatar와 Typography 컴포넌트를 활용하여 글쓴이의 대표 이미지와 글 제목을 스타일링할 수 있습니다.

소스코드예제이미지2

위 소스를 적용하면 다음과 같은 화면이 됩니다.

이제 각 게시글이 카드 형태로 표현되어 보다 직관적이고 세련된 UI를 제공합니다.

React에 MUI (Material-UI) 사용하여 리액트 화면 디자인 하기 - 상세 이미지 1

다음 단계로 대표 사진을 업로드하여 같이 보이도록 작업을 진행할 수 있습니다.

이를 통해 사용자 경험을 더욱 향상시킬 수 있습니다.

Material-UI는 다양한 컴포넌트와 스타일링 옵션을 제공하여, React 애플리케이션을 쉽게 디자인하고 사용자에게 더욱 나은 경험을 제공할 수 있게 합니다.

이번 글에서 다룬 Card 컴포넌트 외에도 다양한 컴포넌트를 활용하여 애플리케이션을 더욱 풍부하게 만들어보세요.

질문이 있거나 도움이 필요하면 언제든지 댓글로 남겨주세요.

감사합니다. 😊