react : useRef

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":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]"]
+[{"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":648,"mtime":1612342222317,"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":9,"column":16,"nodeType":"28","messageId":"29","endLine":9,"endColumn":23},"no-native-reassign",["30"],"no-negated-in-lhs",["31"],"no-unused-vars","'setList' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]

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

@@ -1,41 +1,27 @@
-import { useMemo, useState } from 'react';
+import { createRef, useRef, useState } from 'react';
 import './App.css';
 
 function App() {
-  const [list, setList] = useState([1, 2, 3, 4]);
-  const [str, setStr] = useState('합계');
+  // useRef (디자인)
+  // dom 을 변경할 때 사용
+  const ref = useRef(null);
+
+  const [list, setList] = useState([
+    { id: 1, name: 'kim' },
+    { id: 2, name: 'hong' },
+  ]);
+
+  const refs = Array.from({ length: list.length }).map(() => createRef());
 
-  const getAddResult = () => {
-    let sum = 0;
-    list.forEach((i) => (sum += i));
-    console.log(sum);
-    return sum;
-  };
-  const addResult = useMemo(() => getAddResult(), [list]);
   return (
     <>
-      <button
-        onClick={() => {
-          setStr('안녕');
-        }}
-      >
-        문자변경
+      <button onClick={() => (refs[0].current.style.backgroundColor = 'red')}>
+        색변경
       </button>
-      <button
-        onClick={() => {
-          setList([...list, 10]);
-        }}
-      >
-        리스트 값 추가
-      </button>
-      <div>
-        {list.map((i) => (
-          <h1>{i}</h1>
-        ))}
-      </div>
-      <div>
-        {str} : {addResult}
-      </div>
+      <div ref={ref}>박스</div>
+      {list.map((user, index) => (
+        <h1 ref={refs[index]}>{user.name}</h1>
+      ))}
     </>
   );
 }