사용법

사용법 (Usage)

Material UI 컴포넌트를 어떻게 활용하는지 기본적인 사용법을 함께 살펴보아요. 설치 후 첫 컴포넌트를 화면에 띄우고, 전역 설정을 잡는 순서로 차근차근 진행해 봅시다.

출처: 문서

본문

퀵스타트 (Quickstart)

설치가 끝나면 어떤 Material UI 컴포넌트든 바로 import 해서 사용할 수 있어요. 예를 들어 Button의 variant를 outlined로 바꿔보면 스타일이 어떻게 달라지는지 바로 확인할 수 있죠:

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

export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}

전역 설정 (Globals)

Material UI 컴포넌트는 각자 독립적으로 동작하도록 만들어져서, 전역 범위(globally scoped)의 스타일을 따로 요구하지 않아요. 다만 더 나은 사용자 경험과 개발자 경험을 위해, 아래 전역 설정을 앱에 추가하는 걸 권장해요.

반응형 메타 태그 (Responsive meta tag)

Material UI는 모바일 우선(mobile-first) 컴포넌트 라이브러리예요. 즉, 먼저 모바일 기기용 코드를 작성하고, 필요에 따라 CSS 미디어 쿼리로 컴포넌트를 키워나가는 방식이에요.

모든 기기에서 올바르게 렌더링되고 터치 확대(touch zooming)가 되도록, <head> 요소에 반응형 뷰포트 메타 태그를 추가하세요:

<meta name="viewport" content="initial-scale=1, width=device-width" />

CssBaseline

Material UI는 선택적으로 사용할 수 있는 CssBaseline 컴포넌트를 제공해요. 이 컴포넌트는 브라우저와 기기 간의 일관성 문제를 해결해 주고, normalize.css 같은 대체 전역 스타일 시트보다 Material UI에 더 잘 맞춰진 리셋 스타일을 제공합니다.

기본 폰트 (Default font)

Material UI는 기본적으로 Roboto 폰트를 사용해요. 자세한 내용은 설치—Roboto 폰트 문서를 참고하세요.

사용법