test

src/App.js

@@ -1,24 +1,72 @@
-import logo from './logo.svg';
-import './App.css';
+import React, {useState, useEffect} from 'react';
+
+import App1 from './components/App1';
+import App2 from './components/App2';
+import {Test} from './components/test';
+// import * as TestComp from './components/test';
 
 function App() {
+  const [isTest, setIsTest] = useState(true);
+  const [isApp1, setIsApp1] = useState(true);
+  const [isApp2, setIsApp2] = useState(false);
+
+  const handleClickApp2 = (e) => {
+    e.preventDefault();
+
+    setIsApp1(false);
+    setIsApp2(true);
+
+    return false;
+  };
+
+  useEffect(() => {
+    console.log(`isApp1 : '${isApp1}', isApp2 : '${isApp2}'`);
+  }, [isApp1, isApp2]);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
+    <>
+      <div>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+
+            setIsTest(!isTest);
+
+            return false;
+          }}
+        >Test</button>
+        <a
+          href='/app1'
+          onClick={(e) => {
+            e.preventDefault();
+
+            setIsApp1(true);
+            setIsApp2(false);
+
+            return false;
+          }}
+        >App1</a>
         <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+          href='/app2'
+          onClick={handleClickApp2}
+        >App2</a>
+      </div>
+      <div>
+        {/* {false && <Test />}
+        {true && <App1 />}
+        {false && <App2 />} */}
+
+        {/** Test 컴포넌트 */}
+        {isTest && <Test />}
+        {/* {isTest && <TestComp.Test />} */}
+
+        {/** App1 컴포넌트 */}
+        {isApp1 && <App1 />}
+
+        {/** App2 컴포넌트 */}
+        {isApp2 && <App2 />}
+      </div>
+    </>
   );
 }
 

src/components/App1.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import logo from '../logo.svg';
+import '../App.css';
+import {Test} from './test';
+
+function App1() {
+  return (
+    <div className='App'>
+      <header className='App-header'>
+        <img src={logo} className='App-logo' alt='logo' />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className='App-link'
+          href='https://reactjs.org'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Learn React
+        </a>
+        <Test />
+        <Test testData='1' />
+        {true && <Test testData='ABC' />}
+      </header>
+    </div>
+  );
+}
+
+export default App1;

src/components/App2.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import '../App.css';
+import {Test, testStr} from './test';
+
+const App2 = () => {
+  return (
+    <div className='App'>
+      <header className='App-header'>
+        <p>{testStr}</p>
+        <Test testData='2' />
+      </header>
+    </div>
+  );
+}
+
+export default App2;

src/components/test.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const testStr = 'test';
+
+function Test(props) {
+  const testData = props.testData ?? '';
+
+  return (
+    <p>{testStr} component {testData}</p>
+  );
+}
+
+export {Test, testStr};

src/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
   <React.StrictMode>
     <App />