react web game : 지뢰찾기 - context api 최적화

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 = () => {
       <button onClick={onClickBtn}>시작</button>
     </div>
   );
-};
+});
 
 export default Form;

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 (
     <table>
@@ -13,6 +13,6 @@ const Table = () => {
         ))}
     </table>
   );
-};
+});
 
 export default Table;

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 (
+    <RealTd
+      onClickTd={onClickTd}
+      onRightClickTd={onRightClickTd}
+      data={tableData[rowIndex][cellIndex]}
+    />
+  );
+  // return useMemo(
+  //   () => (
+  //     <td
+  //       style={getTdStyle(tableData[rowIndex][cellIndex])}
+  //       onClick={onClickTd}
+  //       onContextMenu={onRightClickTd}
+  //     >
+  //       {getTdText(tableData[rowIndex][cellIndex])}
+  //     </td>
+  //   ),
+  //   [tableData[rowIndex][cellIndex]]
+  // );
+});
+
+const RealTd = memo(({ onClickTd, onRightClickTd, data }) => {
+  console.log("realTd rendering");
   return (
     <td
-      style={getTdStyle(tableData[rowIndex][cellIndex])}
+      style={getTdStyle(data)}
       onClick={onClickTd}
       onContextMenu={onRightClickTd}
     >
-      {getTdText(tableData[rowIndex][cellIndex])}
+      {getTdText(data)}
     </td>
   );
-};
+});
 
 export default Td;

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 (
     <tr>
@@ -12,6 +12,6 @@ const Tr = ({ rowIndex }) => {
           .map((td, i) => <Td rowIndex={rowIndex} cellIndex={i} />)}
     </tr>
   );
-};
+});
 
 export default Tr;