[modern-react] router 구현 - App.js 설정
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
"react-helmet-async": "^2.0.4",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-query": "^3.39.3",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-router-dom": "^7.9.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"recoil": "^0.7.7",
|
||||
"styled-components": "^6.1.8",
|
||||
|
||||
@@ -3,131 +3,11 @@ import React, { Suspense } from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
// 앱별 코드 가져오기
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
// 성능 모니터링을 위한 서비스 가져오기
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
// ■■chap02■■
|
||||
import AppClass from './AppClass';
|
||||
import './chap02/class.css';
|
||||
|
||||
// // ■■chap03■■
|
||||
// import MyHello from './chap03/MyHello';
|
||||
// import EventBasic from './chap03/EventBasic';
|
||||
// import StateBasic from './chap03/StateBasic';
|
||||
// import books from './chap03/books';
|
||||
// import ForList from './chap03/ForList';
|
||||
// import ForNest from './chap03/ForNest';
|
||||
// import ForFilter from './chap03/ForFilter';
|
||||
// import ForSort from './chap03/ForSort';
|
||||
// import SelectStyle from './chap03/SelectStyle';
|
||||
// import StyledPanel from './chap03/StyledPanel';
|
||||
// import TitledPanel from './chap03/TitledPanel';
|
||||
// import ListTemplate from './chap03/ListTemplate';
|
||||
// import TypeProp, { Member } from './chap03/TypeProp';
|
||||
// import StateParent from './chap03/StateParent';
|
||||
// import EventMouse from './chap03/EventMouse';
|
||||
// import EventCompare from './chap03/EventCompare';
|
||||
// import EventError from './chap03/EventError';
|
||||
// import EventObj from './chap03/EventObj';
|
||||
// import EventPoint from './chap03/EventPoint';
|
||||
// import EventKey from './chap03/EventKey';
|
||||
// import EventArgs from './chap03/EventArgs';
|
||||
// import EventArgs2 from './chap03/EventArgs2';
|
||||
// import EventPropagation from './chap03/EventPropagation';
|
||||
// import EventOnce from './chap03/EventOnce';
|
||||
// import EventPassive from './chap03/EventPassive';
|
||||
|
||||
// // ■■chap04■■
|
||||
// import StateForm from './chap04/StateForm';
|
||||
// import StateFormUC from './chap04/StateFormUC';
|
||||
// import FormTextarea from './chap04/FormTextarea';
|
||||
// import FormSelect from './chap04/FormSelect';
|
||||
// import FormList from './chap04/FormList';
|
||||
// import FormRadio from './chap04/FormRadio';
|
||||
// import FormCheck from './chap04/FormCheck';
|
||||
// import FormCheckMulti from './chap04/FormCheckMulti';
|
||||
// import FormFile from './chap04/FormFile';
|
||||
// import StateNest from './chap04/StateNest';
|
||||
// import StateNestImmer from './chap04/StateNestImmer';
|
||||
// import StateNestImmer2 from './chap04/StateNestImmer2';
|
||||
// import StateTodo from './chap04/StateTodo';
|
||||
// import FormBasic from './chap04/FormBasic';
|
||||
// import FormYup from './chap04/FormYup';
|
||||
// import FromKorean from './chap04/FromKorean';
|
||||
|
||||
// // // ■■chap05■■
|
||||
// import LazyBasic from './chap05/LazyBasic';
|
||||
// import LazyMulti from './chap05/LazyMulti';
|
||||
// import SuspenseSimple from './chap05/SuspenseSimple';
|
||||
// import SuspenseResult from './chap05/SuspenseResult';
|
||||
// import ProfilerBasic from './chap05/ProfilerBasic';
|
||||
// import StyledComp from './chap05/StyledComp';
|
||||
// import { MyButton, MyStyledButton } from './chap05/StyledComp2';
|
||||
// import StyledCommon from './chap05/StyledCommon';
|
||||
// import GlobalStyle from './chap05/StyledGlobal';
|
||||
// import StyledProps from './chap05/StyledProps';
|
||||
// import EmotionJsx from './chap05/EmotionJsx';
|
||||
// import EmotionComp from './chap05/EmotionComp';
|
||||
// /** @jsxImportSource @emotion/react */
|
||||
// import { css, Global } from '@emotion/react';
|
||||
// import PortalBasic from './chap05/PortalBasic';
|
||||
// import ErrorRoot from './chap05/ErrorRoot';
|
||||
// import ErrorRetryRoot from './chap05/ErrorRetryRoot';
|
||||
// import ErrorEventRoot from './chap05/ErrorEventRoot';
|
||||
|
||||
// // ■■chap06■■
|
||||
// import MaterialBasic from './chap06/MaterialBasic';
|
||||
// import MaterialDrawer from './chap06/MaterialDrawer';
|
||||
// import MaterialGrid from './chap06/MaterialGrid';
|
||||
// import { CssBaseline, ThemeProvider } from '@mui/material';
|
||||
// import theme from './chap06/theme';
|
||||
// import MaterialMode from './chap06/MaterialMode';
|
||||
// import FormMui from './chap06/FormMui';
|
||||
// import QueryPre from './chap06/QueryPre';
|
||||
// import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
// import QueryBasic from './chap06/QueryBasic';
|
||||
// import { ErrorBoundary } from 'react-error-boundary';
|
||||
// import QuerySuspense from './chap06/QuerySuspense';
|
||||
|
||||
// // ■■chap07■■
|
||||
// import StateEffect from './chap07/StateEffect';
|
||||
// import HookTimer from './chap07/HookTimer';
|
||||
// import HookEffect from './chap07/HookEffect';
|
||||
// import HookRefNg from './chap07/HookRefNg';
|
||||
// import HookRef from './chap07/HookRef';
|
||||
// import HookRefForward from './chap07/HookRefForward';
|
||||
// import HookCallbackRef from './chap07/HookCallbackRef';
|
||||
// import HookReducer from './chap07/HookReducer';
|
||||
// import HookReducerUp from './chap07/HookReducerUp';
|
||||
// import HookReducerInit from './chap07/HookReducerInit';
|
||||
// import HookContext from './chap07/HookContext';
|
||||
// import MyThemeProvider from './chap07/MyThemeProvider';
|
||||
// import HookThemeButton from './chap07/HookThemeButton';
|
||||
// import { RecoilRoot } from 'recoil';
|
||||
// import RecoilCounter from './chap07/RecoilCounter';
|
||||
// import RecoilTodo from './chap07/RecoilTodo';
|
||||
// import RecoilTodoUp from './chap07/RecoilTodoUp';
|
||||
// import HookMemo from './chap07/HookMemo';
|
||||
// import HookTransition from './chap07/HookTransition';
|
||||
// import HookDeferred from './chap07/HookDeferred';
|
||||
// import HookDeferredTransition from './chap07/HookDeferredTransition';
|
||||
// import HookCustom from './chap07/HookCustom';
|
||||
|
||||
// // // ■■chap08■■
|
||||
// // New Router
|
||||
// import { RouterProvider } from 'react-router-dom';
|
||||
// import routesBasic from './chap08/routesBasic';
|
||||
// import routesLink from './chap08/routesLink';
|
||||
// import routesParam from './chap08/routesParam';
|
||||
// import routesHandle from './chap08/routesHandle';
|
||||
// import { HelmetProvider } from 'react-helmet-async';
|
||||
// import routesMyLink from './chap08/routesMyLink';
|
||||
// import routesScroll from './chap08/routesScroll';
|
||||
|
||||
// ■■column■■
|
||||
// import MyStore from './column/MyStore';
|
||||
/* eslint-enable no-unused-vars */
|
||||
import { RouterProvider } from 'react-router-dom';
|
||||
import routeBasic from './routesBasic';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
|
||||
@@ -136,13 +16,9 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
|
||||
// 리액트 앱(App 컴포넌트) 그리기
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
<RouterProvider router={routeBasic} />
|
||||
);
|
||||
|
||||
|
||||
|
||||
// Code 2-2-4
|
||||
// setInterval(() => {
|
||||
// root.render(
|
||||
|
||||
131
modern-react/my-react/src/routesBasic.js
Normal file
131
modern-react/my-react/src/routesBasic.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import { Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
|
||||
import App from './App';
|
||||
|
||||
// ■■chap02■■
|
||||
// import AppClass from './AppClass';
|
||||
// import './chap02/class.css';
|
||||
|
||||
// // ■■chap03■■
|
||||
// import MyHello from './chap03/MyHello';
|
||||
// import EventBasic from './chap03/EventBasic';
|
||||
// import StateBasic from './chap03/StateBasic';
|
||||
// import books from './chap03/books';
|
||||
// import ForList from './chap03/ForList';
|
||||
// import ForNest from './chap03/ForNest';
|
||||
// import ForFilter from './chap03/ForFilter';
|
||||
// import ForSort from './chap03/ForSort';
|
||||
// import SelectStyle from './chap03/SelectStyle';
|
||||
// import StyledPanel from './chap03/StyledPanel';
|
||||
// import TitledPanel from './chap03/TitledPanel';
|
||||
// import ListTemplate from './chap03/ListTemplate';
|
||||
// import TypeProp, { Member } from './chap03/TypeProp';
|
||||
// import StateParent from './chap03/StateParent';
|
||||
// import EventMouse from './chap03/EventMouse';
|
||||
// import EventCompare from './chap03/EventCompare';
|
||||
// import EventError from './chap03/EventError';
|
||||
// import EventObj from './chap03/EventObj';
|
||||
// import EventPoint from './chap03/EventPoint';
|
||||
// import EventKey from './chap03/EventKey';
|
||||
// import EventArgs from './chap03/EventArgs';
|
||||
// import EventArgs2 from './chap03/EventArgs2';
|
||||
// import EventPropagation from './chap03/EventPropagation';
|
||||
// import EventOnce from './chap03/EventOnce';
|
||||
// import EventPassive from './chap03/EventPassive';
|
||||
|
||||
// // ■■chap04■■
|
||||
// import StateForm from './chap04/StateForm';
|
||||
// import StateFormUC from './chap04/StateFormUC';
|
||||
// import FormTextarea from './chap04/FormTextarea';
|
||||
// import FormSelect from './chap04/FormSelect';
|
||||
// import FormList from './chap04/FormList';
|
||||
// import FormRadio from './chap04/FormRadio';
|
||||
// import FormCheck from './chap04/FormCheck';
|
||||
// import FormCheckMulti from './chap04/FormCheckMulti';
|
||||
// import FormFile from './chap04/FormFile';
|
||||
// import StateNest from './chap04/StateNest';
|
||||
// import StateNestImmer from './chap04/StateNestImmer';
|
||||
// import StateNestImmer2 from './chap04/StateNestImmer2';
|
||||
// import StateTodo from './chap04/StateTodo';
|
||||
// import FormBasic from './chap04/FormBasic';
|
||||
// import FormYup from './chap04/FormYup';
|
||||
// import FromKorean from './chap04/FromKorean';
|
||||
|
||||
// // // ■■chap05■■
|
||||
// import LazyBasic from './chap05/LazyBasic';
|
||||
// import LazyMulti from './chap05/LazyMulti';
|
||||
// import SuspenseSimple from './chap05/SuspenseSimple';
|
||||
// import SuspenseResult from './chap05/SuspenseResult';
|
||||
// import ProfilerBasic from './chap05/ProfilerBasic';
|
||||
// import StyledComp from './chap05/StyledComp';
|
||||
// import { MyButton, MyStyledButton } from './chap05/StyledComp2';
|
||||
// import StyledCommon from './chap05/StyledCommon';
|
||||
// import GlobalStyle from './chap05/StyledGlobal';
|
||||
// import StyledProps from './chap05/StyledProps';
|
||||
// import EmotionJsx from './chap05/EmotionJsx';
|
||||
// import EmotionComp from './chap05/EmotionComp';
|
||||
// /** @jsxImportSource @emotion/react */
|
||||
// import { css, Global } from '@emotion/react';
|
||||
// import PortalBasic from './chap05/PortalBasic';
|
||||
// import ErrorRoot from './chap05/ErrorRoot';
|
||||
// import ErrorRetryRoot from './chap05/ErrorRetryRoot';
|
||||
// import ErrorEventRoot from './chap05/ErrorEventRoot';
|
||||
|
||||
// // ■■chap06■■
|
||||
import MaterialBasic from './chap06/MaterialBasic';
|
||||
import MaterialDrawer from './chap06/MaterialDrawer';
|
||||
import MaterialGrid from './chap06/MaterialGrid';
|
||||
import { CssBaseline, ThemeProvider } from '@mui/material';
|
||||
import theme from './chap06/theme';
|
||||
import MaterialMode from './chap06/MaterialMode';
|
||||
import FormMui from './chap06/FormMui';
|
||||
import QueryPre from './chap06/QueryPre';
|
||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
import QueryBasic from './chap06/QueryBasic';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import QuerySuspense from './chap06/QuerySuspense';
|
||||
|
||||
// // ■■chap07■■
|
||||
// import StateEffect from './chap07/StateEffect';
|
||||
// import HookTimer from './chap07/HookTimer';
|
||||
// import HookEffect from './chap07/HookEffect';
|
||||
// import HookRefNg from './chap07/HookRefNg';
|
||||
// import HookRef from './chap07/HookRef';
|
||||
// import HookRefForward from './chap07/HookRefForward';
|
||||
// import HookCallbackRef from './chap07/HookCallbackRef';
|
||||
// import HookReducer from './chap07/HookReducer';
|
||||
// import HookReducerUp from './chap07/HookReducerUp';
|
||||
// import HookReducerInit from './chap07/HookReducerInit';
|
||||
// import HookContext from './chap07/HookContext';
|
||||
// import MyThemeProvider from './chap07/MyThemeProvider';
|
||||
// import HookThemeButton from './chap07/HookThemeButton';
|
||||
// import { RecoilRoot } from 'recoil';
|
||||
// import RecoilCounter from './chap07/RecoilCounter';
|
||||
// import RecoilTodo from './chap07/RecoilTodo';
|
||||
// import RecoilTodoUp from './chap07/RecoilTodoUp';
|
||||
// import HookMemo from './chap07/HookMemo';
|
||||
// import HookTransition from './chap07/HookTransition';
|
||||
// import HookDeferred from './chap07/HookDeferred';
|
||||
// import HookDeferredTransition from './chap07/HookDeferredTransition';
|
||||
// import HookCustom from './chap07/HookCustom';
|
||||
|
||||
// // // ■■chap08■■
|
||||
// // New Router
|
||||
// import { RouterProvider } from 'react-router-dom';
|
||||
// import routesBasic from './chap08/routesBasic';
|
||||
// import routesLink from './chap08/routesLink';
|
||||
// import routesParam from './chap08/routesParam';
|
||||
// import routesHandle from './chap08/routesHandle';
|
||||
// import { HelmetProvider } from 'react-helmet-async';
|
||||
// import routesMyLink from './chap08/routesMyLink';
|
||||
// import routesScroll from './chap08/routesScroll';
|
||||
|
||||
// ■■column■■
|
||||
// import MyStore from './column/MyStore';
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
||||
|
||||
const routesBasic = createBrowserRouter([
|
||||
{ path: '/', element: <App/> }
|
||||
])
|
||||
|
||||
export default routesBasic;
|
||||
Reference in New Issue
Block a user