diff --git a/react_webgame/main/Form.jsx b/react_webgame/main/Form.jsx index c56c39cc..983e8ae3 100644 --- a/react_webgame/main/Form.jsx +++ b/react_webgame/main/Form.jsx @@ -1,7 +1,7 @@ -import React, { useState, useCallback, useContext } from "react"; +import React, { useState, useCallback, useContext, memo } from "react"; import { START_GAME, TableContext } from "./MineSearch"; -const Form = () => { +const Form = memo(() => { const [row, setRow] = useState(10); const [cell, setCell] = useState(10); const [mine, setMine] = useState(20); @@ -43,6 +43,6 @@ const Form = () => { ); -}; +}); export default Form; diff --git a/react_webgame/main/Table.jsx b/react_webgame/main/Table.jsx index f3f169fe..a99a756e 100644 --- a/react_webgame/main/Table.jsx +++ b/react_webgame/main/Table.jsx @@ -1,8 +1,8 @@ -import React, { useContext } from "react"; +import React, { useContext, memo } from "react"; import { TableContext } from "./MineSearch"; import Tr from "./Tr"; -const Table = () => { +const Table = memo(() => { const { tableData } = useContext(TableContext); return ( @@ -13,6 +13,6 @@ const Table = () => { ))}
); -}; +}); export default Table; diff --git a/react_webgame/main/Td.jsx b/react_webgame/main/Td.jsx index c8b8fd86..3f9926b8 100644 --- a/react_webgame/main/Td.jsx +++ b/react_webgame/main/Td.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useContext } from "react"; +import React, { memo, useCallback, useContext, useMemo } from "react"; import { CODE, TableContext, @@ -41,11 +41,12 @@ const getTdStyle = (code) => { // 칸 상태에 따라 출력 값 const getTdText = (code) => { + console.log("td rendering"); switch (code) { case CODE.NORMAL: return ""; case CODE.MINE: - return "X"; + return ""; case CODE.CLICKED_MINE: return "펑"; case CODE.FLAG_MINE: @@ -59,7 +60,7 @@ const getTdText = (code) => { } }; -const Td = ({ rowIndex, cellIndex }) => { +const Td = memo(({ rowIndex, cellIndex }) => { const { tableData, dispatch, halted } = useContext(TableContext); // 클릭시 상태에 따라 dispatch 수행 @@ -114,15 +115,38 @@ const Td = ({ rowIndex, cellIndex }) => { [tableData[rowIndex][cellIndex], halted] ); + return ( + + ); + // return useMemo( + // () => ( + // + // {getTdText(tableData[rowIndex][cellIndex])} + // + // ), + // [tableData[rowIndex][cellIndex]] + // ); +}); + +const RealTd = memo(({ onClickTd, onRightClickTd, data }) => { + console.log("realTd rendering"); return ( - {getTdText(tableData[rowIndex][cellIndex])} + {getTdText(data)} ); -}; +}); export default Td; diff --git a/react_webgame/main/Tr.jsx b/react_webgame/main/Tr.jsx index 31deff0e..e7d78ca2 100644 --- a/react_webgame/main/Tr.jsx +++ b/react_webgame/main/Tr.jsx @@ -1,8 +1,8 @@ -import React, { useContext } from "react"; +import React, { memo, useContext } from "react"; import { TableContext } from "./MineSearch"; import Td from "./Td"; -const Tr = ({ rowIndex }) => { +const Tr = memo(({ rowIndex }) => { const { tableData } = useContext(TableContext); return ( @@ -12,6 +12,6 @@ const Tr = ({ rowIndex }) => { .map((td, i) => )} ); -}; +}); export default Tr;