다시 시작하는 리액트 - 리액트 실무 기초 5-2(심층)리액트2023. 4. 14. 20:41
Table of Contents
728x90
반응형
5-2. 머테리얼 UI 사용하기
- 부트스트랩처럼 이미 다 만들어진 ui를 가져다 쓰기.
머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있어요.
공식 문서( https://material-ui.com/ )에서 어떻게 생겼는 지 보고 사용 해봅시다!
- 머테리얼 UI 설치하기.
yarn add @material-ui/core @material-ui/icons
이런식으로 속성 설정을 통하여 컴포넌트의 스타일을 커스텀할 수 있음.
ex) variants를 text로 하냐, contained로 하냐, outlined으로 하냐에 따라 버튼의 생김새가 달라짐.
<Button variant="text"> Text </Button>
<Button variant="contained"> Contained </Button>
<Button variant="outlined"> Outlined </Button>
ex) color를 secondary, success, error 등 무엇으로 하냐에 따라 button의 color 역시 달라짐.
<Button color="secondary"> Secondary </Button>
<Button variant="contained" color="success"> Success </Button>
<Button variant="outlined" color="error"> Error </Button>
이 외에도 자세한 속성들은 사이트에서 확인할 수 있음.
- 버킷리스트 프로젝트 중 Detail components를 머테리얼 UI를 사용해서 고쳐보기.
import React from "react";
import { useParams, useHistory } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { deleteBucketFB, updateBucketFB } from "./redux/modules/bucket";
import Button from "@material-ui/core/Button";
const Detail = (props) => {
const dispatch = useDispatch();
const history = useHistory();
const params = useParams();
const bucket_index = params.index;
const bucket_list = useSelector((state) => state.bucket.list);
return (
<div>
<h1> {bucket_list[bucket_index] ? bucket_list[bucket_index].text : ""} </h1>
<Button
variant="outlined"
color="primary"
onClick={() => { dispatch(updateBucketFB(bucket_list[bucket_index].id));
}}
> 완료하기 </Button>
<Button
variant="outlined"
color="secondary"
onClick={() => { dispatch(deleteBucketFB(bucket_list[bucket_index].id)); history.goBack();
}}
> 삭제하기 </Button>
</div>
);
};
export default Detail;
728x90
반응형
'(심층)리액트' 카테고리의 다른 글
다시 시작하는 리액트 - 리액트 실무 기초 5-4 Quiz (0) | 2023.04.17 |
---|---|
다시 시작하는 리액트 - 리액트 실무 기초 5-3 (0) | 2023.04.16 |
다시 시작하는 리액트 - 리덕스(redux)를 사용한 퀴즈 만들기 (0) | 2023.04.13 |
다시 시작하는 리액트 - 리액트 실무 기초 5-1 (0) | 2023.04.12 |
다시 시작하는 리액트 - 리액트 실무 기초 4 - 2 (0) | 2023.04.11 |
@min' :: 개발을 하자
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!