[mui]Datepicker로 캘린더 만들기

1. 패키지 설치하기

with npm
npm install @mui/x-date-pickers

with yarn
yarn add @mui/x-date-pickers

2. 최상단에 provider 감싸주기

import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <LocalizationProvider dateAdapter={AdapterDateFns}>
                <App />
            </LocalizationProvider>
        </ThemeProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

2. import 하기

import React, { useState } from "react";
import TextField from "@mui/material/TextField";

import { DatePicker } from "@mui/x-date-pickers/DatePicker";

const Date = () => {
    const [value, setValue] = useState(null);

    return (
        <div>
            <DatePicker
                value={value}
                label="Basic example"
                onChange={(newValue) => {
                    setValue(newValue);
                }}
                renderInput={(params) => <TextField {...params} />}
            />
        </div>
    );
};

export default Date;