CheckBox re-rendering

@@ -7,7 +7,7 @@ import Icon from "@material-ui/core/Icon";
 import IconButton from "@material-ui/core/IconButton";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import Button from "@material-ui/core/Button";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
 
 
 const useStyles = makeStyles((theme) => ({
 const useStyles = makeStyles((theme) => ({
   iconButton: {
   iconButton: {
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
   },
   },
   icon: {
   icon: {
     fontSize: 70,
     fontSize: 70,
-    color: "black"
+    color: "black",
   },
   },
 
 
   paper: {
   paper: {
@@ -35,12 +35,12 @@ const useStyles = makeStyles((theme) => ({
       width: "30ch",
       width: "30ch",
     },
     },
   },
   },
-  button:{
-    '& > *': {
+  button: {
+    "& > *": {
       margin: theme.spacing(1),
       margin: theme.spacing(1),
-      float:"right"
+      float: "right",
     },
     },
-  }
+  },
 }));
 }));
 
 
 function getModalStyle() {
 function getModalStyle() {
@@ -64,27 +64,6 @@ export default function AddButton() {
     setOpen(false);
     setOpen(false);
   };
   };
 
 
-  const body = (
-    <div style={modalStyle} className={classes.paper}>
-      <Typography variant="h5">ADD TODO LIST</Typography>
-      
-      <form className={classes.input} noValidate autoComplete="off">
-        <TextField id="standard-basic" label="Title" />
-        <TextField id="standard-basic" label="Todo 1" />
-        <TextField id="standard-basic" label="Todo 1" />
-      </form>
-
-      <form className={classes.button}>
-        <Button variant="outlined" color="primary" onClick={handleClose}>
-          확인
-        </Button>
-        <Button variant="outlined" color="secondary" onClick={handleClose}>
-          취소
-        </Button>
-      </form>
-    </div>
-  );
-
   return (
   return (
     <>
     <>
       <IconButton className={classes.iconButton} onClick={handleOpen}>
       <IconButton className={classes.iconButton} onClick={handleOpen}>
@@ -95,7 +74,24 @@ export default function AddButton() {
         aria-labelledby="simple-modal-title"
         aria-labelledby="simple-modal-title"
         aria-describedby="simple-modal-description"
         aria-describedby="simple-modal-description"
       >
       >
-        {body}
+        <div style={modalStyle} className={classes.paper}>
+          <Typography variant="h5">ADD TODO LIST</Typography>
+
+          <form className={classes.input} noValidate autoComplete="off">
+            <TextField id="standard-basic" label="Title" />
+            <TextField id="standard-basic" label="Todo 1" />
+            <TextField id="standard-basic" label="Todo 1" />
+          </form>
+
+          <form className={classes.button}>
+            <Button variant="outlined" color="primary" onClick={handleClose}>
+              확인
+            </Button>
+            <Button variant="outlined" color="secondary" onClick={handleClose}>
+              취소
+            </Button>
+          </form>
+        </div>
       </Modal>
       </Modal>
     </>
     </>
   );
   );

-import React from "react";
+import React, {useState} from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { makeStyles } from "@material-ui/core/styles";
 import Card from "@material-ui/core/Card";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import CardContent from "@material-ui/core/CardContent";
@@ -30,15 +30,24 @@ const useStyles = makeStyles({
   },
   },
 });
 });
 
 
+
 export default function TodoCard({ data, isMine, isVisible }) {
 export default function TodoCard({ data, isMine, isVisible }) {
   const classes = useStyles();
   const classes = useStyles();
+  const [render, setRender] = useState(0);
   const todo = data.todo.split(",");
   const todo = data.todo.split(",");
-  const check = data.ck.split(",").map((ck) => {
+  const [checkState, setCheckState] = useState(data.ck.split(",").map((ck) => {
     return parseInt(ck);
     return parseInt(ck);
-  });
-
+  }))
   let settingButton = null;
   let settingButton = null;
 
 
+  const handleCheck = (idx) => {
+    let tempArr = checkState;
+    tempArr[idx] = tempArr[idx]?0:1;
+    setCheckState(tempArr);
+    setRender([]);
+  };
+
+
   if (isMine) {
   if (isMine) {
     settingButton = (
     settingButton = (
       <SettingButton></SettingButton>
       <SettingButton></SettingButton>
@@ -56,15 +65,16 @@ export default function TodoCard({ data, isMine, isVisible }) {
         <Typography className={classes.title} variant="h6">
         <Typography className={classes.title} variant="h6">
           {data.title}
           {data.title}
         </Typography>
         </Typography>
-        {/* <Typography className={classes.percent} variant="h6">
-          99%
-        </Typography> */}
+        <Typography className={classes.percent} variant="h6">
+
+          {checkState.reduce((a, b) => a + b)}/{checkState.length}
+        </Typography>
         {todo.map((item, idx) => {
         {todo.map((item, idx) => {
           return (
           return (
             <FormControlLabel
             <FormControlLabel
               className={classes.checkBox}
               className={classes.checkBox}
-              control={<Checkbox/>}
-              checked={check[idx]}
+              control={<Checkbox onClick={e=>(handleCheck(idx))}/>}
+              checked={checkState[idx]}
               label={item}
               label={item}
             />
             />
           );
           );