스파르타 코딩클럽 - 리액트 5주차(3)

1. 머테리얼 UI 사용하기.

1-1. 부트스트랩처럼 이미 다 만들어진 UI를 가져다 써보기.

머테리얼 UI는 우리가 styled-components를 쓰던 것처럼 사용할 수 있다. 공식문서(링크텍스트)에서 어떻게 생겼는지 보고 사용해보자!

• (1). 머테리얼 UI 설치하기.

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

• (2). 버킷리스트 프로젝트 중 Detail 머테리얼 UI를 사용해서 고치기.

// 리액트 패키지를 불러옵니다.
import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";

// redux hook을 불러옵니다.
import { useDispatch, useSelector } from "react-redux";
// 내가 만든 액션 생성 함수를 불러옵니다.
import {
  deleteBucket,
  updateBucket,
  deleteBucketFB,
  updateBucketFB,
} from "./redux/modules/bucket";

const Detail = (props) => {
    const dispatch = useDispatch();
    
    
  // 스토어에서 상태값 가져오기
  const bucket_list = useSelector((state) => state.bucket.list);
  // url 파라미터에서 인덱스 가져오기
  let bucket_index = parseInt(props.match.params.index);

  console.log(props);
  return (
    <div>
      <h1>{bucket_list[bucket_index].text}</h1>
      <ButtonGroup>
        <Button
          variant="outlined"
          onClick={() => {
            //   dispatch(); <- 괄호안에는 액션 생성 함수가 들어가야겠죠?
            // 예를 들면 이렇게요.
            dispatch(deleteBucketFB(bucket_index));
            props.history.goBack();
          }}
        >
          삭제하기
        </Button>
        <Button
          variant="outlined"
          color="primary"
          onClick={() => {
            dispatch(updateBucketFB(bucket_index));
            props.history.goBack();
          }}
        >
          완료하기
        </Button>
      </ButtonGroup>
    </div>
  );
};

export default Detail;