[React] material-ui 템플릿 사용방법 (버전 업데이트 하기 추가)

[2025.05.12] material-ui 버전 업데이트 추가

추가글

---

 

오랜만에 material-ui 들어가서 컴포넌트 사용법을 보려고 하니까

이렇게 Grid에 Legacy가 붙은걸 발견했다.

보니까 기존에 쓰던건 legacy고, 새로운 버전의 Grid가 생긴 듯 하다.

 

https://mui.com/material-ui/migration/upgrade-to-v7/

Upgrade to v7 - Material UI

 

 

✅ MUI v5 → v7 한 번에 업그레이드하는 법

1. 최신 버전 설치

bash

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

npm install @mui/icons-material@latest

yarn 사용 시:

 

bash

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

---

2. TypeScript 사용하는 경우

• 최소 버전: TypeScript 4.9 이상 필요합니다.
• 패키지 버전도 맞춰서 업데이트하세요:

bash

npm install typescript@latest

---

3. React 버전도 확인

• React 17 이상이 필요합니다.
• 가능하면 React 18 사용을 권장합니다.

---

4. 코드에서 breaking changes 확인

https://mui.com/material-ui/migration/upgrade-to-v6/

https://mui.com/material-ui/migration/upgrade-to-v7/

각각 코드 변환이 필요함..

 

---

 

 

 

 

개인 프로젝트를 진행하는데 디자인까지는 구현할 수 없어 material-ui 에서 제공하는 템플릿을 적용하려고 한다.

 

이번 글에서는 로컬에서 템플릿을 띄우는것 까지만 하도록 하겠다.

 

 

 

---

Material UI 설치

 

아래 명령어로 Material UI를 설치해준다.

$ npm install @mui/material @emotion/react @emotion/styled
$ npm install @mui/material @mui/styled-engine-sc styled-components
$ npm install @fontsource/roboto
$ npm install @mui/icons-material

 

 

 

package.json에 다음을 추가해준다.

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

 

 

 

 

index.html에 아래 태그를 추가해준다.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

 

 

 

 

 

https://mui.com/material-ui/getting-started/installation/

Installation - Material UI

공식 홈페이지에서 자세한 설명을 읽어볼 수 있다.

 

 

 

 

 

 

 

 

---

템플릿 다운

 

https://mui.com/material-ui/getting-started/templates/

9+ Free React Templates - Material UI

 

 

Materail UI에서 제공하는 무료템플릿이다.

 

 

원하는 템플릿에 해당하는 소스코드를 눌러 소스를 다운로드한다.

 

 

나는 Landing Page를 선택했다.

 

 

 

 

 

 

다운로드한 소스들을 src 폴더 하위에  landing-page 폴더를 만들어주고 붙여넣기한다.

(이번 포스팅에선 템플릿을 화면에 띄우기만 할 목적으로 폴더 정리는 따로 안해주었다.)

 

---

index.js 작성

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//import App from './App';				//-- 주석
import LandingPage from './landing-page/LandingPage'; 	//작성
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* <App /> */}		//-- 주석
    <LandingPage />		// 작성
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

App 컴포넌트 대신에 LandingPage를 import해준다.

 

 

 

 

 

 

 

 

서버를 실행시키면 템플릿 화면이 뜨는 것을 볼 수 있다.