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;