react : useEffect

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":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"]
+[{"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":787,"mtime":1612337226848,"results":"8","hashOfConfig":"6"},{"size":196,"mtime":1612336218178,"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,"usedDeprecatedRules":"12"},{"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,32 +1,35 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './App.css';
 
 function App() {
-  let sample = [
-    { id: 1, name: '홍길동' },
-    { id: 2, name: '임꺽정' },
-    { id: 3, name: '장보고' },
-    { id: 4, name: '세종대왕' },
-  ];
-  const [users, setUsers] = useState(sample);
-  const [num, setNum] = useState(5);
+  const [data, setData] = useState(0);
+  const [search, setSearch] = useState(0);
 
   const download = () => {
-    setUsers([...sample, { id: num, name: '조자룡' }]);
-    setNum(num + 1);
+    let downloaddata = 5;
+    setData(downloaddata);
   };
+  // 실행 시점 :
+  // (1) App() 함수 최초 실행 될때 (마운트 될 때)
+  // (2) state 변경 시
+  // (3) 의존리스트 관리 가능
+  useEffect(() => {
+    console.log('useEffect 실행');
+    download();
+  }, [search]);
 
-  console.log('rendering');
   return (
     <>
-      <div>
-        {users.map((u) => (
-          <h1>
-            {u.id}, {u.name}
-          </h1>
-        ))}
-      </div>
-      <button onClick={download}>다운로드</button>
+      <h1>검색</h1>
+      <button onClick={() => setSearch(2)}>검색하기</button>
+      <h1>데이터 : {data} </h1>
+      <button
+        onClick={() => {
+          setData(data + 1);
+        }}
+      >
+        더하기
+      </button>
     </>
   );
 }

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+let num = 10;
+
 const Sub = () => {
   console.log('sub');
   return (
@@ -9,4 +11,5 @@ const Sub = () => {
   );
 };
 
+export { num };
 export default Sub;