App.tsx, main.tsx 파일 작성

megaptera-kr · Aug 16, 2023 · 97cc079 · 97cc079
1 parent 4bfeb1d
commit 97cc079
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
  </head>
  <body>
  <div id="root"></div>
+ <div id="demo"></div>
  <script type="module" src="./src/main.tsx"></script>
  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
  "jest": "^29.6.2",
  "jest-environment-jsdom": "^29.6.2",
  "parcel": "^2.9.3",
+ "process": "^0.11.10",
  "typescript": "^5.1.6"
  },
  "dependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,19 @@
+import {useState} from 'react';
+
+export default function App() {
+ const [count, setCount] = useState(0);
+
+ const handleClick = () => {
+ setCount(count + 1);
+ };
+
+ return (
+ <div>
+ <p>Hello, world!</p>
+ <p>Count: {count}</p>
+ <button type='button' onClick={handleClick}>
+ 클릭!
+ </button>
+ </div>
+ );
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -2,8 +2,35 @@ import ReactDOM from 'react-dom/client';
 
 import App from './App';
 
-const container = document.getElementById('app');
+function Demo({count}: {
+ count: number;
+}) {
+ return (
+ <p>DEMO: {count}</p>
+ );
+}
 
-const root = ReactDOM.createRoot(container);
+function main() {
+ const element = document.getElementById('root');
+ const element2 = document.getElementById('demo');
 
-root.render(<App />);
+ if (!element || !element2) {
+ return;
+ }
+
+ const root = ReactDOM.createRoot(element);
+ const root2 = ReactDOM.createRoot(element2);
+
+ root.render(<App />);
+
+ let count = 0;
+
+ root2.render(<Demo count={count}/>);
+
+ setInterval(() => {
+ count += 1;
+ root2.render(<Demo count={count}/>);
+ }, 1_000);
+}
+
+main();