Material UI Tutorial #3 - Buttons

버튼 컴포넌트 소개

버튼 컴포넌트 개요

• 이 비디오에서는 두 번째 컴포넌트인 버튼 컴포넌트를 다룬다. 문서의 검색창에 버튼을 입력하여 다양한 예제를 확인할 수 있다.

포함된 버튼

• 포함된 버튼은 가장 인기 있는 유형으로, 배경색과 그림자가 있어 페이지에서 떨어져 보인다.

• 버튼의 변형(variant)은 타이포그래피와 유사하게 사용되며, 기본적으로 회색 배경과 검은 텍스트로 설정된다.

색상 및 상태

• 색상 속성을 사용하여 배경색을 설정할 수 있으며, 테마 색상을 기반으로 한다. 예를 들어, 'primary'는 파란색이다.

• 비활성화된 버튼은 흐릿한 텍스트와 그림자가 제거된 형태로 나타난다.

다른 유형의 버튼

• 기본적으로 변형을 지정하지 않으면 텍스트 버튼이 생성된다. 마우스를 올리면 매우 연한 색상이 나타난다.

• 윤곽선(button outline)이 있는 버튼도 인기가 있으며, 마우스를 올리면 연한 색상이 나타난다.

버튼 코드 작성하기

코드 임포트 및 기본 예제

• 소스 코드를 열고 Material UI에서 버튼을 임포트한다.

• 첫 번째 예제로 'submit'이라는 텍스트가 있는 기본 버튼을 만든다.

다양한 스타일 적용하기

• 'primary' 색상을 적용하면 배경이 없는 텍스트 버튼이 생성되고, 마우스를 올리면 연한 파란색으로 변경된다.

• 두 번째 예제로 'secondary' 색상과 함께 윤곽선 변형을 적용하여 새로운 스타일의 버튼을 만든다.

버튼 그룹 만들기

그룹화된 버튼 구성

• 여러 개의 관련된 버튼들을 묶어주는 'button group'를 임포트하고 생성한다.

• 각기 다른 숫자를 가진 세 개의 버튼을 추가하여 그룹화된 형태를 보여준다.

스타일링 및 변형 적용하기

• 단일 button group 컴포넌트에 스타일과 변형(예: contained)을 적용하여 시각적으로 구분되는 효과를 준다.

폼 제출용 버튼 준비하기

폼 제출 기능 구현 계획

버튼 사용법

버튼 색상 및 변형 설정

• 버튼의 색상을 'secondary'로 설정하고, 변형을 'contained'로 지정하는 방법 설명.

• 'disable elevation' 속성을 사용하여 그림자 효과를 제거할 수 있지만, 다시 그림자를 원할 경우 이 속성을 제거함.

클릭 이벤트 추가

• 버튼에 클릭 이벤트를 추가하는 방법 소개.

• 클릭 시 콘솔 로그에 "you clicked me"라는 메시지를 출력하도록 함수 설정.

버튼 기능 요약

• 버튼의 유연성과 다양한 활용 가능성 강조.

• 아이콘을 포함한 버튼 사용에 대한 예고.

컨테이너 컴포넌트 사용법

콘텐츠 래퍼 생성

• 모든 콘텐츠를 감싸는 컨테이너 컴포넌트를 사용하는 이유 설명.