react : useState

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","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"]
+[{"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":692,"mtime":1612334714924,"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,51 +1,32 @@
 import { useState } from 'react';
 import './App.css';
-import Sub from './Sub';
-
-let a = 10;
-const b = 20;
 
 function App() {
-  const mystyle = {
-    color: 'red',
-  };
-
-  let list = [1, 2, 3];
-
-  const users = [
-    { id: 1, name: 'kim', phone: '1234' },
-    { id: 2, name: 'lee', phone: '1234' },
-    { id: 3, name: 'choi', phone: '1234' },
+  let sample = [
+    { id: 1, name: '홍길동' },
+    { id: 2, name: '임꺽정' },
+    { id: 3, name: '장보고' },
+    { id: 4, name: '세종대왕' },
   ];
-  const update = {
-    id: 2,
-    name: 'park',
-  };
-  const newUser = users.map((u) =>
-    u.id === update.id ? { ...u, ...update } : u,
-  );
-  console.log(newUser);
+  const [users, setUsers] = useState(sample);
+  const [num, setNum] = useState(5);
 
-  const [number, setNumber] = useState(1);
-  const add = () => {
-    setNumber(number + 1);
-    console.log('add', number);
+  const download = () => {
+    setUsers([...sample, { id: num, name: '조자룡' }]);
+    setNum(num + 1);
   };
 
+  console.log('rendering');
   return (
     <>
-      <div style={mystyle}>안녕{a === 10 ? '10입니다.' : '10이 아닙니다'}</div>
-      <h1 className="box-style">제목{b === 20 && '20입니다.'}</h1>
       <div>
-        {list.map((n) => (
-          <h1 key={n}>n</h1>
+        {users.map((u) => (
+          <h1>
+            {u.id}, {u.name}
+          </h1>
         ))}
       </div>
-      <div>
-        <h1>숫자 : {number} </h1>
-        <button onClick={add}>더하기</button>
-      </div>
-      <Sub />
+      <button onClick={download}>다운로드</button>
     </>
   );
 }