diff --git a/modern-react/my-react/package.json b/modern-react/my-react/package.json
index 4f89823..7c8c27c 100644
--- a/modern-react/my-react/package.json
+++ b/modern-react/my-react/package.json
@@ -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",
diff --git a/modern-react/my-react/src/index.js b/modern-react/my-react/src/index.js
index 693926c..024433a 100644
--- a/modern-react/my-react/src/index.js
+++ b/modern-react/my-react/src/index.js
@@ -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(
diff --git a/modern-react/my-react/src/routesBasic.js b/modern-react/my-react/src/routesBasic.js
new file mode 100644
index 0000000..315842f
--- /dev/null
+++ b/modern-react/my-react/src/routesBasic.js
@@ -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;
\ No newline at end of file