리액트 19강

메인페이지 만들기

import React from "react";
import Items from "./components/Items";
import Header from "./components/Header";
import CreateItem from "./components/Createitem";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Header/>
                <Routes>
                    <Route path="/" element={<Items/>}/>
                    <Route path="/todo" element={<Items/>}/>
                    <Route path="/done" element={<Items/>}/>
                    <Route path="/create_item" element={<CreateItem/>}/>
                </Routes>
            </div>
        </BrowserRouter>
    );
}

export default App;

App.js

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


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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

index.js - > 여기서 화면이 나오는 거임

export default function items(){
    return(<table>
            <td></td>
            <td>Task</td>
            <td>Due</td>
            <td></td>
            <tr>
                <td></td>
                <td>커피마시기</td>
                <td>220331</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>커피마시기</td>
                <td>220331</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>커피마시기</td>
                <td>220331</td>
                <td></td>
            </tr>
    </table>
    );
}

items.js

결과화면