5주차 - 머테리얼 UI 사용하기

1) 부트스트랩처럼 이미 다 만들어진 ui를 가져다 써보자!

머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있어요.

공식 문서(https://material-ui.com/)에서 어떻게 생겼는 지 보고 사용 해봅시다!

 

2) 머테리얼 UI 설치하기

yarn add @material-ui/core @material-ui/icons

 

3) 버킷리스트 프로젝트 중 <Detail/>! 머테리얼 UI를 사용해서 고쳐봅시다!
(4주차 과제에 바로 접목 시킴)

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(updateBucket(bucket_index));
          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;

 

공식 문서

https://mui.com/

MUI: The React component library you always wanted