신입개발자_장민기

import { useState } from "react"; export default function Login() { const [inputs, setInputs] = useState({ email: "", password: "", }); function handleInputChange(identifier, value) { setInputs({ ...inputs, [identifier]: value }); } function handleSubmit(event) { event.preventDefault(); console.log(inputs); } return ( Login email handleInputChange("email", event.target.value) } > password handle..

일단 대기

import MainNavigation from "../components/MainNavigation" import { useRouteError } from "react-router-dom" //추가 export default function Error(){ const error = useRouteError(); console.log("error: ", error) console.log("error: ", error.data.status) console.log("error: ", error.data.message) let title = "An error occurred!!"; let message = "Something went wrong!!" if(error.data.status === 500){ me..

import { Outlet, useNavigation } from "react-router-dom"; //추가 import MainNavigation from "../components/MainNavigation" export default function RootLayout(){ const navigation = useNavigation(); //추가 return( {navigation.state === "loading" && loading...} {/* {navigation.state === "loading" && alert("테스트용")} */} ) }

import HomePage from "./pages/Home" import Products from "./pages/Products" import RootLayout from "./pages/root"; import Error from "./pages/Error"; import ProductDetail from "./pages/ProductDetail" import ProductDetail2 from "./pages/ProductDetail2" import Users, {loader as usersLoader} from "./pages/Users" //Alias import { createBrowserRouter, RouterProvider } from "react-router-dom" import a..

import HomePage from "./pages/Home" import Products from "./pages/Products" import RootLayout from "./pages/root"; import Error from "./pages/Error"; import ProductDetail from "./pages/ProductDetail" import ProductDetail2 from "./pages/ProductDetail2" import Users from "./pages/Users" import { createBrowserRouter, RouterProvider } from "react-router-dom" const router = createBrowserRouter( [{ pa..

import HomePage from "./pages/Home" import Products from "./pages/Products" import RootLayout from "./pages/root"; import Error from "./pages/Error"; import ProductDetail from "./pages/ProductDetail" //ProductDetail 페이지 연결 import ProductDetail2 from "./pages/ProductDetail2" //ProductDetail2 페이지 연결 import { createBrowserRouter, RouterProvider } from "react-router-dom" const router = createBrowser..

import { Link } from "react-router-dom" //Link 추가 const ProductList = [ { id: "p1", title: "Product 1"}, { id: "p2", title: "Product 2"}, { id: "p3", title: "Product 3"}, ]; export default function Products(){ return( The Products Page {/* App.js 수정 */} {ProductList.map((row, idx) => { let link="/products/"+row.id; //그냥 입력할 경우 // let link=`/products/${row.id}`; //백틱을 사용할 경우 return( {row.title} )..

import { NavLink } from "react-router-dom"; //(Link에서 NavLink로 변경) import classes from "./MainVanigation.module.css"; //Alias처럼 사용 export default function MainNavigation(){ return( //수정(Link에서 NavLink로 변경) {/* Home //기존 Products Error */} {/* 링크 시 효과 부여 */} { return isActive ? classes.menu : undefined}}>Home isActive ? classes.menu : undefined}>Products ) } import { Link, useNavigate } from "rea..

App import HomePage from "./pages/Home" import Products from "./pages/Products" import RootLayout from "./pages/root"; import Error from "./pages/Error"; import { createBrowserRouter, RouterProvider } from "react-router-dom" const router = createBrowserRouter( //여러 사이트를 연결하기 때문에 배열로 정렬 [{ path: "/", element: , errorElement: , //연결되지 않은 페이지일 경우, 이동 children: [ {path: "/", element: }, {path: "/pro..