react : useMemo

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":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"]
+[{"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":817,"mtime":1612339609002,"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":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"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",["21"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],{"ruleId":"22","replacedBy":"23"},{"ruleId":"24","replacedBy":"25"},{"ruleId":"26","severity":1,"message":"27","line":14,"column":51,"nodeType":"28","endLine":14,"endColumn":57,"suggestions":"29"},"no-native-reassign",["30"],"no-negated-in-lhs",["31"],"react-hooks/exhaustive-deps","React Hook useMemo has a missing dependency: 'getAddResult'. Either include it or remove the dependency array.","ArrayExpression",["32"],"no-global-assign","no-unsafe-negation",{"desc":"33","fix":"34"},"Update the dependencies array to be: [getAddResult]",{"range":"35","text":"36"},[350,356],"[getAddResult]"]

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

@@ -1,35 +1,41 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import './App.css';
 
 function App() {
-  const [data, setData] = useState(0);
+  const [list, setList] = useState([1, 2, 3, 4]);
-  const [search, setSearch] = useState(0);
+  const [str, setStr] = useState('합계');
 
-  const download = () => {
+  const getAddResult = () => {
-    let downloaddata = 5;
+    let sum = 0;
-    setData(downloaddata);
+    list.forEach((i) => (sum += i));
+    console.log(sum);
+    return sum;
   };
-  // 실행 시점 :
+  const addResult = useMemo(() => getAddResult(), [list]);
-  // (1) App() 함수 최초 실행 될때 (마운트 될 때)
-  // (2) state 변경 시
-  // (3) 의존리스트 관리 가능
-  useEffect(() => {
-    console.log('useEffect 실행');
-    download();
-  }, [search]);
-
   return (
     <>
-      <h1>검색</h1>
-      <button onClick={() => setSearch(2)}>검색하기</button>
-      <h1>데이터 : {data} </h1>
       <button
         onClick={() => {
-          setData(data + 1);
+          setStr('안녕');
         }}
       >
-        더하기
+        문자변경
       </button>
+      <button
+        onClick={() => {
+          setList([...list, 10]);
+        }}
+      >
+        리스트 값 추가
+      </button>
+      <div>
+        {list.map((i) => (
+          <h1>{i}</h1>
+        ))}
+      </div>
+      <div>
+        {str} : {addResult}
+      </div>
     </>
   );
 }