simple diary : optimize

simplediary/src/App.js

@@ -1,4 +1,10 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
 import "./App.css";
 import DiaryEditor from "./DiaryEditor";
 import DiaryList from "./DiaryList";
@@ -30,7 +36,7 @@ const App = () => {
     getData();
   }, []);
 
-  const onCreate = (author, content, emotion) => {
+  const onCreate = useCallback((author, content, emotion) => {
     const created_date = new Date().getTime();
 
     const newItem = {
@@ -42,26 +48,38 @@ const App = () => {
     };
     dataId.current += 1;
 
-    setData([newItem, ...data]);
-  };
+    setData((data) => [newItem, ...data]);
+  }, []);
 
-  const onRemove = (targetId) => {
+  const onRemove = useCallback((targetId) => {
     alert(`${targetId}가 삭제되었습니다.`);
-    const newDiaryList = data.filter((it) => it.id !== targetId);
-    setData(newDiaryList);
-  };
+    setData((data) => data.filter((it) => it.id !== targetId));
+  }, []);
 
-  const onEdit = (targetId, newContent) => {
-    setData(
+  const onEdit = useCallback((targetId, newContent) => {
+    setData((data) =>
       data.map((it) =>
         it.id === targetId ? { ...it, content: newContent } : it
       )
     );
-  };
+  }, []);
+
+  const getDiaryAnalysis = useMemo(() => {
+    const goodCount = data.filter((it) => it.emotion >= 3).length;
+    const badCount = data.length - goodCount;
+    const goodRatio = Math.round((goodCount / data.length) * 100, -1);
+    return { goodCount, badCount, goodRatio };
+  }, [data.length]);
+
+  const { goodCount, badCount, goodRatio } = getDiaryAnalysis;
 
   return (
     <div className="App">
       <DiaryEditor onCreate={onCreate} />
+      <div>전체 일기 : {data.length}</div>
+      <div>기분 좋은 일기 : {goodCount}</div>
+      <div>기분 나쁜 일기 : {badCount}</div>
+      <div>기분 좋은 일기 비율: {goodRatio} %</div>
       <DiaryList onEdit={onEdit} onRemove={onRemove} diaryList={data} />
     </div>
   );

simplediary/src/DiaryEditor.js

@@ -3,7 +3,6 @@ import React, { useRef, useState } from "react";
 const DiaryEditor = ({ onCreate }) => {
   const authorInput = useRef();
   const contentInput = useRef();
-
   const [state, setState] = useState({
     author: "",
     content: "",
@@ -77,4 +76,4 @@ const DiaryEditor = ({ onCreate }) => {
   );
 };
 
-export default DiaryEditor;
+export default React.memo(DiaryEditor);

simplediary/src/DiaryItem.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 
 const DiaryItem = ({
   onEdit,
@@ -9,6 +9,10 @@ const DiaryItem = ({
   emotion,
   id,
 }) => {
+  useEffect(() => {
+    console.log(`${id}번 째 아이템 렌더`);
+  });
+
   const [isEdit, setIsEdit] = useState(false);
   const [localContent, setLocalContent] = useState(content);
 
@@ -76,4 +80,4 @@ const DiaryItem = ({
   );
 };
 
-export default DiaryItem;
+export default React.memo(DiaryItem);

simplediary/src/OptimizeTest.js

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+
+const CounterA = React.memo(({ count }) => {
+  console.log(`counter a update - count: ${count}`);
+  return <div>{count}</div>;
+});
+
+const areEqual = (prev, next) => {
+  return prev.obj.count === next.obj.count;
+};
+
+const CounterB = React.memo(({ obj }) => {
+  console.log(`counter b update - obj.count: ${obj.count}`);
+  return <div>{obj.count}</div>;
+}, areEqual);
+
+const OptimizeTest = () => {
+  const [count, setCount] = useState(1);
+  const [obj, setObj] = useState({
+    count: 1,
+  });
+
+  return (
+    <div style={{ padding: 50 }}>
+      <div>
+        <h2>Counter A</h2>
+        <CounterA count={count} />
+        <button onClick={() => setCount(count)}>A button</button>
+      </div>
+      <div>
+        <h2>Counter B</h2>
+        <CounterB obj={obj} />
+        <button onClick={() => setObj({ count: obj.count })}>B button</button>
+      </div>
+    </div>
+  );
+};
+
+export default OptimizeTest;

simplediary/src/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
+);