react : useState, component

react-springboot/my-app/.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"3"},{"size":500,"mtime":499162500000,"results":"4","hashOfConfig":"5"},{"size":362,"mtime":1612328420362,"results":"6","hashOfConfig":"5"},{"size":756,"mtime":1612332221813,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"10"},"11g3wnd",{"filePath":"11","messages":"12","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["15","16"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",[],{"ruleId":"17","replacedBy":"18"},{"ruleId":"19","replacedBy":"20"},"no-native-reassign",["21"],"no-negated-in-lhs",["22"],"no-global-assign","no-unsafe-negation"]
+[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js":"4"},{"size":500,"mtime":499162500000,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":1612328420362,"results":"7","hashOfConfig":"6"},{"size":1077,"mtime":1612333105209,"results":"8","hashOfConfig":"6"},{"size":162,"mtime":1612333128212,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"11g3wnd",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["19","20"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],{"ruleId":"21","replacedBy":"22"},{"ruleId":"23","replacedBy":"24"},"no-native-reassign",["25"],"no-negated-in-lhs",["26"],"no-global-assign","no-unsafe-negation"]

react-springboot/my-app/src/App.js

@@ -1,4 +1,6 @@
+import { useState } from 'react';
 import './App.css';
+import Sub from './Sub';
 
 let a = 10;
 const b = 20;
@@ -24,15 +26,26 @@ function App() {
   );
   console.log(newUser);
 
+  const [number, setNumber] = useState(1);
+  const add = () => {
+    setNumber(number + 1);
+    console.log('add', number);
+  };
+
   return (
     <>
       <div style={mystyle}>안녕{a === 10 ? '10입니다.' : '10이 아닙니다'}</div>
       <h1 className="box-style">제목{b === 20 && '20입니다.'}</h1>
       <div>
         {list.map((n) => (
-          <h1>n</h1>
+          <h1 key={n}>n</h1>
         ))}
       </div>
+      <div>
+        <h1>숫자 : {number} </h1>
+        <button onClick={add}>더하기</button>
+      </div>
+      <Sub />
     </>
   );
 }

react-springboot/my-app/src/Sub.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Sub = () => {
+  console.log('sub');
+  return (
+    <div>
+      <h1>Sub</h1>
+    </div>
+  );
+};
+
+export default Sub;