쭈링이.log 쭈링이.log

Selectselect 란 여러 MenuItem 컴포넌트를 사용하여 옵션들 중 선택하여 제공하는 컴포넌트이다.Material UI의 select 컴포넌트는 다양한 설정과 스타일링 옵션을 제공하여 옵션을 선택 할 수 있다. import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material";import { useState } from "react";function Mui() { const [age, setAge] = useState(''); const handleChange = (event: SelectChangeEvent) => { setAge(event.target.valu..

RatingRating 이란 material UI 에서 아이콘으로 평점을 나타내주거나 기능을 구현한 컴포넌트이다.Material UI의 Rating컴포넌트는 다양한 설정과 스타일링 옵션을사용하여 평점 설정 해주는 컴포넌트이다. import { Box, Rating, Typography } from "@mui/material";import { useState } from "react";function Mui() { const [value, setValue] = useState(2); // 기본 값으 2로 설정 return ( legend': { mt: 2 }, }} > Controlled { ..

Radio GroupRadio Group 이란 라디오 버튼들을 그룹화 시켜 라디오 버튼 기능을 제공하는 Materal UI 의 컴포넌트이다.RadioGroup 컴포넌트와 FormControlLabel, Radio 컴포넌트속 속성을 추가하여 기능 및 디자인을 설정한다. import { Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material";function Mui() { const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; return ( // form 을 제어하는 컴포넌트 Gender // ..

Checkboxcheckbox란 사용자가 선택할 수 있는 체크박스를 생성하는 데 사용된다.Material UI의 Checkbox 컴포넌트는 다양한 설정과 스타일링 옵션을 제공하여 하나 이상의 옵션을 선택 할 수 있다. import { Checkbox } from "@mui/material";function Mui() { const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; // label속성을 선언한다 return ( // defaultChecked 기본으로 체크표시 설정 // 클릭 불가능 설정 // 체크표시 및 클릭 불가능 설정 ..

ButtonButton이란 버튼 태그에 다양한 스타일과 기능을 추가해서 클릭 가능한 액션을 표현해준다.버튼의 모양, 동작 및 스타일을 속성을 통해 제어할 수 있다.기본적으로 버튼 클릭할 때 ripple(물방울 퍼지듯이)스타일이 들어가있다. import { Button, Stack } from "@mui/material";function Mui() { return ( // mui 의 Stack 태그 Text // mui 의 Button 태그 Contained // variant값에 따라 배경색을 추가 Outlined // variant값에 따라 테두리를 추가 ..

Autocomplete Autocomplete란 사용자가 입력할 때마다 옵션을 제안해주는 기능이다.자동으로 입력값이 포함된 옵션을 보여주면서 선택할 수 있게 해준다. import { Autocomplete, TextField } from "@mui/material";function Mui() { const top100Films = [ // 단어검색시 보여줄 옵션들을 나열한다. { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfather', year: 1972 }, { label: 'The Godfather: Part II', year: 1974 }, { label: 'The D..

Material UIMaterial UI 란 React 기반의 UI 컴포넌트 라이브러리로, MUI라고 불리기도 한다.Google의 Material Design 원칙에 기반을 둔 스타일링된 컴포넌트로써 주로 웹 애플리케이션 개발에서 UI를 구성할 때 사용되고 다양한 기능과 디자인 옵션을 제공합니다.    Material UI 설치Material UI를 설치 하기위해서 Visual Studio Code에서 터미널을 열어준다.프로젝트 폴더의 터미널을 열어서 명령어를 입력해준다. npm install @mui/material @emotion/react @emotion/styled 명령어를 입력하면 아래 성공로그가 나타난다. 설치가 성공되면 package.json 에서 확인할 수 있다.