React : 컴포넌트의 종류 (1) MUI 컴포넌트 라이브러리

➡️ MUI 컴포넌트 라이브러리

MUI(https://mui.com)은 구글의 머티리얼 디자인을 구현하는 리액트 컴포넌트로, 레이아웃 컴포넌트와 이 외의 유용한 컴포넌트(버튼, 목록, 표, 카드 등)가 많이 포함되어 있는 라이브러리이다. 

 

 

 

✅ MUI 컴포넌트 라이브러리 설치 순서

1) 리액트 앱 생성

2) 프로젝트 루트 폴더에 MUI 설치 : 프로젝트 루트 폴더로 cd 명령어를 통해 이동한 후 MUI 설치 명령어 입력

npx create-react-app 프로젝트명
cd 프로젝트명
npm install @mui/material @emotion/react @emotion/styled

//package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@mui/material": "^5.16.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

 

 

 

✅ MUI 레이아웃 컴포넌트 사용하는 방법

 : 편리하게 리액트 앱을 구성하기 좋은 MUI가 제공하는 여러가지 레이아웃 컴포넌트 중에 가장 기본이 되는 Container 컴포넌트를 이용한 코드를 살펴보자. 다음 예제에서는 App.js 파일에 AppBar, ToolBar, Typography 컴포넌트를 가져와 사용했다. 참고로 MUI AppBar 컴포넌트는 앱에 툴바를 표시하는 컴포넌트다.

//App.js

import React, { useState } from 'react';
import Contatiner from '@mui/material/Container';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

function App() {
	return {
    	<Container>
        </Container>
    }
}
export default App;

 

 

 

 

✅ MUI 레이아웃 컴포넌트 사용하는 방법 : import 문 이해하기

 : React 애플리케이션에서 가장 자주 사용하는 구문입니다. 이 구문은 두 가지를 하고 있습니다:

import React, { useState } from 'react'; :

1. React 모듈 가져오기: import React from 'react';
   • React 라이브러리에서 기본적으로 내보내는 객체를 React라는 이름으로 가져옵니다. 이 객체는 JSX 구문을 사용하기 위해 필요합니다. JSX를 사용하는 모든 컴포넌트에서 React 객체가 필요합니다.
2. useState 후크 가져오기: import { useState } from 'react';
   • React의 함수형 컴포넌트에서 상태를 관리할 때 사용하는 useState 훅을 가져옵니다. useState는 함수형 컴포넌트에서 상태를 추가하고 관리할 수 있게 해줍니다.