63.프로젝트 최적화

src/App.js

@@ -112,7 +112,7 @@ function App() {
     if (localData) {
       const diaryList = JSON.parse(localData).sort((a, b) => parseInt(b.id) - parseInt(a.id));
       dataId.current = parseInt(diaryList[0].id) + 1;
-      console.log("  dataId.current : ", dataId.current);
+      // console.log("  dataId.current : ", dataId.current);
       dispatch({ type: "INIT", data: diaryList });
     }
 

src/components/DiaryEditor.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useContext, useEffect } from 'react';
+import React, { useState, useRef, useContext, useEffect, useCallback } from 'react';
 import MyHeader from './MyHeader';
 import MyButton from './MyButton';
 import { useNavigate } from 'react-router-dom';
@@ -23,9 +23,10 @@ const DiaryEditor = ({ isEdit, originData }) => {
     const navigate = useNavigate();
     const { onCreate, onEdit, onRemove } = useContext(DiaryDispatchContext);
 
-    const handleClickEmote = (emotion) => {
+    const handleClickEmote = useCallback((emotion) => {
         setEmotion(emotion);
-    }
+    }, []);
+
 
     const hadnleSubmit = () => {
         if (content.length < 1) {

src/components/DiaryItem.js

@@ -6,7 +6,6 @@ import { useNavigate } from 'react-router-dom';
 
 const DiaryItem = ({ id, content, emotion, date }) => {
     const navigate = useNavigate();
-
     const env = process.env;
     env.PUBLIC_URL = env.PUBLIC_URL || "";
 
@@ -40,4 +39,4 @@ const DiaryItem = ({ id, content, emotion, date }) => {
     );
 };
 
-export default DiaryItem;
+export default React.memo(DiaryItem);

src/components/DiaryList.js

@@ -14,7 +14,8 @@ const filterOptionList = [
     { value: "bad", name: "안좋은 감정만" },
 ]
 
-const ControlMenu = ({ value, setOnChange, optionList }) => {
+const ControlMenu = React.memo(({ value, setOnChange, optionList }) => {
+    //console.log("ControlMenu");
     return <select
         className='ControlMenu'
         value={value} onChange={(e) => setOnChange(e.target.value)} >
@@ -23,7 +24,7 @@ const ControlMenu = ({ value, setOnChange, optionList }) => {
                 (<option key={idx} value={it.value}>{it.name}</option>))
         }
     </select>
-}
+})
 
 const DiaryList = ({ diaryList }) => {
     const navigate = useNavigate();

src/components/EmotionItem.js

@@ -1,6 +1,8 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-const EmotionItem = ({ emotion_id, emotion_img, emotion_descript, onClick, isSelected }) => {
+const EmotionItem = ({ emotion_id, emotion_img,
+    emotion_descript,
+    onClick, isSelected }) => {
 
 
 
@@ -13,4 +15,4 @@ const EmotionItem = ({ emotion_id, emotion_img, emotion_descript, onClick, isSel
     </div>
 };
 
-export default EmotionItem;
+export default React.memo(EmotionItem);

src/components/MyButton.js

@@ -11,4 +11,4 @@ const MyButton = ({ text, type, onClick }) => {
     );
 };
 
-export default MyButton;
+export default React.memo(MyButton);

src/components/MyHeader.js

@@ -16,4 +16,4 @@ const MyHeader = ({ headText, leftChild, rightChild }) => {
     );
 };
 
-export default MyHeader;
+export default React.memo(MyHeader);