diff --git a/emotiondiary/src/App.js b/emotiondiary/src/App.js index a7f3bbc3..61fe04ae 100644 --- a/emotiondiary/src/App.js +++ b/emotiondiary/src/App.js @@ -53,7 +53,7 @@ function App() { dispatch({ type: "INIT", data: diaryList }); } - }); + }, []); // CREATE const onCreate = (date, content, emotion) => { diff --git a/emotiondiary/src/components/DiaryEditor.js b/emotiondiary/src/components/DiaryEditor.js index 6634ef82..99d53f58 100644 --- a/emotiondiary/src/components/DiaryEditor.js +++ b/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) { diff --git a/emotiondiary/src/components/DiaryItem.js b/emotiondiary/src/components/DiaryItem.js index 01c02e94..71786e8f 100644 --- a/emotiondiary/src/components/DiaryItem.js +++ b/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); diff --git a/emotiondiary/src/components/DiaryList.js b/emotiondiary/src/components/DiaryList.js index 7890578c..4c3c60e2 100644 --- a/emotiondiary/src/components/DiaryList.js +++ b/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 ( ); -}; +}); const DiaryList = ({ diaryList }) => { const navigate = useNavigate(); diff --git a/emotiondiary/src/components/EmotionItem.js b/emotiondiary/src/components/EmotionItem.js index 4d688271..0238636e 100644 --- a/emotiondiary/src/components/EmotionItem.js +++ b/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); diff --git a/emotiondiary/src/pages/Diary.js b/emotiondiary/src/pages/Diary.js index 92705db8..ec62a26b 100644 --- a/emotiondiary/src/pages/Diary.js +++ b/emotiondiary/src/pages/Diary.js @@ -31,7 +31,6 @@ const Diary = () => { if (!data) { return