React - Material-UI [설치]

CSS 에서 Material - UI로

- 별로 만들지 않은 웹사이트 지만 CSS 파일들을 조금씩 material - ui 로 변경시켜 종국에는

모든 css파일 자체가 없게 만들어보자

 

 

Material - UI

- 기존의 웹개발에서는 UI 구성을 css를 사용해서 컴포넌트 js에 import시켜서

직접 해당 컴포넌트를 꾸며줬다. 물론 이방법도 나쁜 방법은 아니지만 컴포넌트의 상태가 바뀌게 되면

해당 css를 따로따로 넣어줘야 한다는 점이 매우 귀찮다. 즉, 유동적 변화에 대처가 어럽다.

 

- Material UI는 React 개발에 쉽게 사용할 수 있는 UI - Framework 이다.

- 다양한 브라우저가 기기와 맞지 않는 호환을 갖거나 html문법이 먹히지 않을 경우

material - ui 가 이를 수정할 수 있다.

- 사람들이 만들어 놓은 css 테마를 이용할 수 있다.

 

CSS Baseline

- 어느 브라우저에도 똑같은 UI를 적용시키고 싶다면 CSSBaseline API를 적용해야 한다. 

- CSS를 전역에서 정규화 시켜주는 API이다. CSSBaseline 컴포넌트를 사용하려면

React 애플리케이션의 최상위 컴포넌트에 CssBaseline을 추가해줘야한다.

<CssBaseline>

</CssBaseline>

 

- 기본적인 활용방법을 명시해 놓은 사이트이다. 거의 대부분의 것들을 여기서 학습해서 활용할 수 있을 것같다.

sarink.github.io/material-ui-with-sass/#/components/accordion

material-ui-with-sass

 

- 사람들이 만들어 놓은 css 테마(template)를 이용할 수 있다.

material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-themes

React themes & templates | Material-UI Store

 

Scoping on children

- 한번에 모든 css를 material - ui 로 바꿀수는 없다. 따라서 material - ui 의 범위를 지정해 준다.

- ... 정확한 개념과 활용방법은 더 공부해야겠다.

 

 

설치

npm install @material-ui/core

위 코드를 터미널에 넣어주면 material-ui 패키지가 설치된다.

 

※ 주의 !!! materal-ui는 현재 react 17.0 버전에서는 지원하지 않는다. react-hook을 지원하지 않기 때문!!

- 당연히 고쳐지겠지만 당장 어려움을 겪는다면 다운그레이드 해보자

 

 

 

 

SVG Icons

- material ui 에서 제공하는 다양한 기본 아이콘 들이다.

npm install @material-ui/icons

위코드를 터미널에 넣어주면 SVG Icons를 사용할 수 있다.

 

 

사용법

material-ui.com/getting-started/usage/

Usage - Material-UI

기본적인 사용법은 다음과 같다.

 

- 사용하고자 하는 항목을 import 한다. (가장 기본으로 Button을 사용해보자)

- 아래 보다시피 컴포넌트를 사용하는 방법이다. 즉, ui를 적용할 때 해당 컴포넌트를 사용한다는 것이다.

import Button from '@material-ui/core';

function Footer(){
    return(
        
            <Button variant = "contained" color ="primary">
                Hello World
            </Button>

    )

}

 

CssBaseline 컴포넌트

- CssBaseline 을 일괄적인 스타일로 적용하려면 CssBaseline 컴포넌트를 React App의 최상위 컴포넌트에 추가해줘야 한다.

function App() {
  return (
    <CssBaseline>
      <BrowserRouter baselink = "/stay_brella">
        <Header></Header>
        <Route exact path="/" component={Home}></Route>
        <Route exact path="/login" component={LoginPage}></Route>
        <Route exact path="/intro" component={Intro}></Route>
        <Route exact path="/signUp" component={SignUp}></Route>
        <Footer></Footer>
      </BrowserRouter>
    </CssBaseline>
  );
}

폰트 불러오기

- 예전에도 올렸지만 fonts.google.com/?selection.family=Open+Sans:wght@400;600&sidebar.open=true

Google Fonts

- 위 사이트에서 적용할 폰트를 적용하면 되는데, import 해서 css같이 사용한다. 추후 폰트적용하는 법을 더올리겠다.

 

Typography 컴포넌트

- material-ui안에서는 <Typography />라는 하나의 컴포넌트를 사용해서 <h1>, <p>, <span>과 같은 다양한 텍스트 태그를

적용할 수 있다.

function Home (){
    return(
        <div>
            <Typography variant="h4" color ="primary">h4 Heading</Typography>
            <Typography variant="h3">h4 Heading</Typography>
            <Typography variant="h1" align="center"> Heading</Typography>
            <Typography variant="h1" align="right"> Heading</Typography>
            <Typography variant="h1" color="secondary"> Heading</Typography>
        </div>
    );
}

- variant : h1 이나 h2같은 태그를 적용할 수 있다.

- color : 제한적이지만 seconary, primary 같이 색을 바꿀수 있다.

- align : 텍스트를 정렬시킬수 있다.

 

Material Icons

- material ui는 @material-ui/icons 라는 패키지를 이용해서 1000여종의 svg 아이콘을 제공하고 있다.

- 먼저 react app에 material icons 패키지를 설치해주자

(yarn은 자동으로 버전을 맞춰주는 기능이 있어서 왠만한 패키지 설치는 yarn으로 하자)

yarn install @material-ui/icons

 

- 아래는 material icons 페이지이다.

material-ui.com/components/material-icons/

Material Icons - Material-UI

- 원하는 아이콘을 검색하고 해당 컴포넌트를 불러와서 바로 사용하면된다.

 

다양한 material-ui 컴포넌트 예제

- material-ui는 거의 모든 컴포넌트들이 예제로 존재한다.

sarink.github.io/material-ui-with-sass/#/components/app-bar

material-ui-with-sass