[Project 2]

먼저 디렉토리를 구성합니다.

테이블을 생성하기 위해 셀과 행에 대한 JSX 파일을 생성합니다.

우리는 시간 선택을 시간표 근처에 놓을 것이므로 그에 대한 일련의 시간을 만들 것입니다.

Material-ui를 사용하여 테이블 형식을 만듭니다.

import React from "react";
import {
  TableContainer,
  Typography,
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
} from "@mui/material";

const hourData = Array.from({ length: 11 }, (i, j) => j + 9);

// {
//   mon:({})
//   tue:({})
// }

export default function Timetable() {
  return (
    <>
      <TableContainer>
        <Typography>
          <div>Timetable</div>
        </Typography>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell align="center" width={100}>
                Time
              </TableCell>
              <TableCell align="center" width={200}>
                Mon
              </TableCell>
              <TableCell align="center" width={200}>
                Tue
              </TableCell>
              <TableCell align="center" width={200}>
                Wed
              </TableCell>
              <TableCell align="center" width={200}>
                Thu
              </TableCell>
              <TableCell align="center" width={200}>
                Fri
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {hourData.map((time, index) => {
              return (
                <TableRow key={index}>
                  <TableCell align="center">{`${time}:00 - ${
                    time + 1
                  }:00`}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}

{
  mon:({
    start: 9,
    end: 11,
    name: "Math",
    color: "#adasdd",
    id:""
  }),
  tue:({})
}

일시적으로 날짜를 설정하고 Recoil을 사용하여 테이블 위에 놓을 때 날짜를 업데이트하기만 하면 됩니다.

import { atom } from "recoil";

export const timeTableState = atom({
  key: "timeTableState",
  default: {
    mon: ({ start: 9, end: 11, name: "Math", color: "red", id: 1 }),
    tue: ({ start: 10, end: 13, name: "Science", color: "blue", id: 2 }),
    wed: (
      { start: 12, end: 14, name: "Programming", color: "greenyellow", id: 3 },
    ),
    thu: ({ start: 13, end: 19, name: "English", color: "hotpink", id: 4 }),
    fri: ({ start: 9, end: 11, name: "Economics", color: "purple", id: 5 }),
  },
});

일정 데이터를 상태로 저장합니다.

import { TableCell } from "@mui/material";
import React from "react";
import { useRecoilState } from "recoil";
import { timeTableState } from "../store/store";

export default function TimeTableCell({ day, timeNum }) {
  const (timeTableData, settimeTableData) = useRecoilState(timeTableState);
  const timeData = timeTableData(day).find((time) => time.start <= timeNum)
  return <TableCell />;
}

‘useState’를 사용하는 것과 같습니다.

계산이 렌더링될 때마다 발생하지 않도록 하려면 ‘useMemo’를 사용할 수 있습니다.

?. 또는 ??. => ES11 기반 선택적 연결 연산자

속성 값이 없는지 또는 다른지 확인합니다.

정의되지 않은 경우 오류를 표시하는 것이 아니라 정의되지 않은 것으로 표시됩니다.

useRecoilState

재료 UI 스타일

const styles = () => ({
  Table: {
    "& th,td": {
      border: "1px solid rgba(224, 224, 224 , 1)",
    },
  },
});

 <Table className={classes.Table}>

export default withStyles(styles)(TimeTable);

데이터를 추가하고 더미 데이터를 교체하여 개선하겠습니다.

계속

출처

https://wizii.37

(자바스크립트) ?. 선택적 연결 연산자

JavaScript의 물음표 점 JavaScript 코드를 보면 ?. 또는 ?? 다음과 같은 구문을 본 적이 있습니까? 이것은 ES11에 도입된 새로운 연산자입니다!
?. => 선택적 연결 연산자를 개발할 때 개체의 속성

wizii.tistory.com