[React] 달력 만들어보기

1. index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

reportWebVitals();

2. App.js

import "./App.css";
import Mycom from "./components/Mycom";
import CalenderTop from "./components/CalenderTop";
function App() {
  return (
    <div className="App">
      <CalenderTop />
      <Mycom />
    </div>
  );
}

export default App;

3. components/CalenderTop.js

import React from "react";
import "./CalenderTop.css";

const CalenderTop = () => {
  function weekDiv() {
    let arr = [];
    let tempweek = ["일", "월", "화", "수", "목", "금", "토"];
    for (let i = 0; i < 7; i++) {
      arr.push(<div key={tempweek[i]}>{tempweek[i]}</div>);
    }
    return arr;
  }
  return (
    <div className="Top">
      <div className="Top_month">9月</div>
      <div className="Top_week">{weekDiv()}</div>
    </div>
  );
};

export default CalenderTop;

4. components/Mycom.js

import React from "react";
import "./Mycom.css";

const Mycom = (num) => {
  function makeDay() {
    let day = [];
    for (let i = 1; i <= 30; i++) {
      day.push(i);
    }
    let arr = [];
    for (let i = 0; i < 35; i++) {
      if (i > 4) {
        arr.push(
          <li className="day" key={day[i - 5]}>
            {day[i - 5]}
          </li>
        );
      } else {
        arr.push(<li className="day" key={day[i - 5]}></li>);
      }
    }
    return arr;
  }
  return <ul className="dayWrap">{makeDay()}</ul>;
};

export default Mycom;

5. 결과물