[ React ] react-calendar 커스터마이즈 하기

 

 

react-calendar 설치

---

https://www.npmjs.com/package/react-calendar

npm i react-calendar

 

 

 

 

 

SmallCalendar.js

---

react-calendar를 가져온다.

import Calendar from "react-calendar"

export const SmallCalendar = () => {
    return (
	<Calendar />
    )
}

 

 

CalendarPage.js

---

CalendarPage안에 달력외 메뉴들을 구성할 예정이다.

import { SmallCalendar } from "../components/SmallCalendar"

export const CalendarPage = () => {
    return (
        <div>
          <SmallCalendar/>
        </div>
    )
}

 

 

App.js

---

마지막으로 App.js에 CalendarPage를 추가해주자.

import './App.css';
import { CalendarPage } from './pages/CalendarPage';

function App() {
  return (
    <div className="App">
      <CalendarPage />
    </div>
  );
}

export default App;

 

 

아래와 같이 화면에 달력이 생성되었다. 이제 내가 원하는 구조로 변경을 해보았다.