Material UI 사용방법

1. 화면설계서 확인

• 구현해야 할 화면 : ex) 게시글 디테일 페이지
• 필요한 컴포넌트 추려내기 : ex) 프로필 사진, 카드형식 박스, 하트 및 댓글 아이콘, 텍스트필드, 버튼 등

2. Material-UI 문서에서 필요한 컴포넌트 고르기

• 사이드바에서 Components 하위 메뉴 확인
• 문서 읽어보고 필요한 부분의 소스코드 복사
• ex) 프로필 사진을 동그랗게 보여주는 아바타(Avatar) 컴포넌트

3. 컴포넌트 만들기

• components 폴더 아래 새로운 스크립트 파일을 만들고 복사한 material ui 소스코드 붙여넣기

4. 커스터마이징하기

• material-ui 사이드바에서 Component API 하위 메뉴들 확인
• 컴포넌트 문서 내 가장 하단에도 관련 컴포넌트 API 링크가 적혀있다.
• API 문서를 읽어보면 Props 영역에 정의된 속성을 사용해서 컴포넌트에 원하는 기능을 입히고 뺄 수 있다.
• ex) 컴포넌트는 variant 속성으로 프로필 사진의 모양을 지정해줄 수 있다. 기본값은 동그라미다.

<Avatar
  alt='Remy Sharp'
  src='/static/images/avatar/1.jpg'
  variant='square'   ---> 속성추가!
/>