Routing10_action함수1_Form태그서버전송2_예외처리_useActionData이용 import React from 'react'; import Home from './pages/Home' import Products from './pages/Products' import Root from './pages/Root'; import UsersRoot from './pages/UsersRoot'; import NewUser from './pages/NewUser'; import Error from './pages/Error'; import ProductDetails from './pages/ProductDetails'; import ProductDetails2 from './pages/Produc..

라우팅 메뉴링크활성화피드백_NaviLink이용 import React from 'react'; import { NavLink } from 'react-router-dom'; import classes from './MainNavigation.module.css' import { Link } from 'react-router-dom'; function MainNavigation(props) { return ( { return isActive ? classes.menu : undefined; }}> Home { return isActive ? classes.a : undefined; }}> products ); } export default MainNavigation; css a{ text-decoratio..

사용자추가1 import {useEffect, useState} from "react"; import {fetchUserList} from "./http.js" import UsersList from './components/UsersList' import Error from './components/Error'; import Box from "./components/Box.js"; export default function App() { const [usersList, setUsersList] = useState([]);//사용자 목록 const [isFetching, setIsFetching] = useState(false); //로딩중 상태저장값 const [error, setError] =useS..

button import Button from "./components/Button"; import { createContext, useReducer,useState } from "react"; export const UserContext = createContext(null); export default function App() { const reducer = (current_state, action )=> { switch (action.type){ case "ADD": return [...current_state, action.xxx]; case "DEL": return [current_state.filter((v,i) => v !== action.xxx)]; default: return curre..

GameBoarder import React, { useState } from 'react'; import "./GameBoarder.css" const initialGameBoard=[ [null, null, null], [null, null, null], [null, null, null], ] // const[gameBoard, setGameBoard] = useState(initialGameBoard); function GameBoarder() { const[gameBoard, setGameBoard] = useState(initialGameBoard); function handleSelect (rowIndex, colIndex){ //1.방법 (베열에 변경사항이 저장되나 동일한 주소값이기 때문에 ..

자식에게이벤트전달패턴 import React from 'react'; import TabButton from './assets/components/TabButton'; function App() { //부모에서 자식 이벤트 핸들러 구현 function handleEvent(){ console.log("hellobutton"); } //App컴포넌트 실행횟수 체트 => 실행하면 1번만 호출됨 console.log("App Component") return ( {/*onSelect 대신에 임의의 값 사용가능 자식 호출 시 이벤트 함수 를 전달함 매우 많이 사용되는 중요한 패턴임*/} Java SQL SPRING SpringBoot Vue ); } export default App; import React f..