emotion diary : optimization

emotiondiary/src/App.js

@@ -53,7 +53,7 @@ function App() {
 
       dispatch({ type: "INIT", data: diaryList });
     }
-  });
+  }, []);
 
   // CREATE
   const onCreate = (date, content, emotion) => {

emotiondiary/src/components/DiaryEditor.js

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import MyHeader from "./MyHeader";
 import MyButton from "./MyButton";
@@ -23,9 +23,9 @@ const DiaryEditor = ({ isEdit, originData }) => {
 
   const navigate = useNavigate();
 
-  const handleClickEmote = (emotion) => {
+  const handleClickEmote = useCallback((emotion) => {
     setEmotion(emotion);
-  };
+  }, []);
 
   const handleSubmit = () => {
     if (content.length < 1) {

emotiondiary/src/components/DiaryItem.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { useNavigate } from "react-router-dom";
 
 import MyButton from "./MyButton";
@@ -37,4 +38,4 @@ const DiaryItem = ({ id, emotion, content, date }) => {
   );
 };
 
-export default DiaryItem;
+export default React.memo(DiaryItem);

emotiondiary/src/components/DiaryList.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import DiaryItem from "./DiaryItem";
 import MyButton from "./MyButton";
@@ -14,7 +14,7 @@ const filterOptionList = [
   { value: "bad", name: "안좋은 감정만" },
 ];
 
-const ControlMenu = ({ value, onChange, optionList }) => {
+const ControlMenu = React.memo(({ value, onChange, optionList }) => {
   return (
     <select
       className="ControlMenu"
@@ -28,7 +28,7 @@ const ControlMenu = ({ value, onChange, optionList }) => {
       ))}
     </select>
   );
-};
+});
 
 const DiaryList = ({ diaryList }) => {
   const navigate = useNavigate();

emotiondiary/src/components/EmotionItem.js

@@ -1,3 +1,5 @@
+import React from "react";
+
 const EmotionItem = ({
   emotion_id,
   emotion_img,
@@ -18,4 +20,4 @@ const EmotionItem = ({
   );
 };
 
-export default EmotionItem;
+export default React.memo(EmotionItem);

emotiondiary/src/pages/Diary.js

@@ -31,7 +31,6 @@ const Diary = () => {
   if (!data) {
     return <div className="DiaryPage">로딩중입니다...</div>;
   } else {
-    console.log(data);
     const curEmotion = emotionList.find(
       (it) => parseInt(it.emotion_id) === parseInt(data.emotion)
     );