리액트 프로젝트를 개발하다보면 사용자 인터페이스를 만들어야 할 때가 있습니다. Material-UI 라이브러리를 사용하면 아름다운 디자인과 다양한 컴포넌트들을 쉽게 활용할 수 있습니다. 이번 글에서는 Material-UI 라이브러리를 리액트 프로젝트에 추가하고, 간단한 예제를 통해 기본적인 사용법을 알아보겠습니다.

목차

• Material-UI 라이브러리 추가
• 기본 컴포넌트 사용
• 마무리

Material-UI 라이브러리 추가

Material-UI 라이브러리를 리액트 프로젝트에 추가하는 방법은 간단합니다. 먼저, 프로젝트 디렉토리에서 다음 명령을 사용하여 Material-UI 라이브러리를 설치합니다.

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

또는

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

위 명령을 통해 Material-UI 관련 라이브러리를 설치할 수 있습니다.

기본 컴포넌트 사용

이제 Material-UI 라이브러리를 설치했으니, 간단한 예제를 통해 몇 가지 기본 컴포넌트를 사용해보겠습니다. 먼저, Button 컴포넌트를 사용해보겠습니다.

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

function App() {
  return (
    <div>
      <Button variant="contained">Click me!</Button>
    </div>
  );
}

export default App;

위 코드에서는 Button 컴포넌트를 불러와서 간단히 사용하고 있습니다.

마무리

이제 Material-UI 라이브러리를 리액트 프로젝트에 추가하고, 기본적인 사용법을 알아보았습니다. 여기서 다루지 않은 다양한 컴포넌트와 속성들을 활용하여 더 다양하고 아름다운 사용자 인터페이스를 만들어보세요.

Material-UI 라이브러리의 자세한 내용은 Material-UI 공식 문서에서 확인할 수 있습니다.

이상으로 Material-UI 라이브러리를 리액트 프로젝트에 사용하는 방법에 대해 알아보았습니다. 감사합니다.