React Material UI Tutorial - 4 - Button

버튼 사용법 - Material UI에서 MUI 버튼 이해하기

MUI 버튼 소개

• 이 비디오에서는 Material UI의 버튼에 대해 설명하며, 기본적인 버튼 및 앵커 요소를 Material Design으로 향상시키는 방법을 다룬다.

• MUI 버튼을 사용하기 위해 import Button from '@mui/material'로 버튼 컴포넌트를 가져와야 한다.

버튼 변형

• 세 가지 변형이 있으며, 첫 번째는 텍스트 변형이다. <Button variant="text">텍스트</Button> 형식으로 사용된다.

• 두 번째는 포함된 변형(contained)으로, 주로 사용자 주의를 끌어야 할 때 사용된다. 예: 등록 또는 로그인 버튼.

• 세 번째는 윤곽선 변형(outlined)으로, 보조 작업에 적합하다. 예: 취소 또는 돌아가기 버튼.

레이아웃 조정

• 현재 버튼 간의 간격이 좁으므로 CSS에서 패딩을 추가하여 여백을 조정한다.

• Material UI에서 제공하는 Stack 컴포넌트를 사용하여 자식 요소들을 행(row) 방향으로 배치하고 간격을 설정한다.

링크 기능 추가

• 텍스트 변형의 경우 href 속성을 사용할 수 있어, 이를 통해 버튼이 링크 역할을 하게 된다. 예: <Button variant="text" href="https://google.com">.

색상 팔레트

• MUI에는 미리 정의된 색상 팔레트가 있으며, 문서에서 확인할 수 있다.

• 색상 카테고리는 기본(primary), 보조(secondary), 오류(error), 경고(warning), 정보(info), 성공(success)이 있다.

색상 변형 예시

• 각 색상 카테고리에 대한 예시를 보여주기 위해 새로운 스택 컴포넌트를 생성하고 다양한 색상의 버튼을 추가한다.

크기 조정

• 더 큰 또는 작은 버튼은 size prop을 통해 조정할 수 있다. 작은(small), 중간(medium), 큰(large)의 세 가지 크기를 설정할 수 있다.

아이콘 추가하기

• Material UI에는 약 2000개의 아이콘 라이브러리가 있으며 설치 후 사용할 수 있다.

아이콘 버튼 사용법

아이콘 버튼 컴포넌트 소개

• MUI는 텍스트 없이 아이콘만으로 버튼을 만들기 위해 아이콘 버튼 컴포넌트를 제공합니다. JSX에서 IconButton을 임포트하고, 전송 아이콘을 이 컴포넌트로 감쌉니다.

접근성을 위한 설정

• 접근성 이유로 aria-label을 추가해야 합니다. 브라우저를 확인하면 아이콘 버튼이 표시되며, 색상과 크기 속성이 적용됩니다. 여기서 색상은 'success', 크기는 'small'로 설정합니다.

내비게이션 바에서의 활용

• 아이콘 버튼은 일반 버튼보다 내비게이션 바에 더 적합합니다. 일반 버튼은 너무 두드러져 보일 수 있습니다.

디자인 시스템에 따른 속성 조정

• 현재 포함된 버튼은 높이가 있으며 그림자가 있습니다. disableElevation 속성을 사용하여 이 효과를 비활성화할 수 있습니다. 두 번째 전송 버튼에 이 속성을 설정하면 차이를 확인할 수 있습니다.

클릭 이벤트 처리 및 리플 효과 비활성화

• 클릭 시 발생하는 리플 효과는 disableRipple 속성을 통해 비활성화할 수 있습니다. 첫 번째 아이콘 버튼에 이 속성을 추가한 후 브라우저를 확인하면 클릭 시 리플 효과가 사라집니다.