From 8447297449fe505a0efdcca2fa408e7c9b455adc Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Wed, 24 Mar 2021 22:42:46 +0900
Subject: [PATCH] =?UTF-8?q?react=20web=20game=20:=20=EC=A7=80=EB=A2=B0?=
 =?UTF-8?q?=EC=B0=BE=EA=B8=B0=20-=20context=20api=20=EC=B5=9C=EC=A0=81?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react_webgame/main/Form.jsx  |  6 +++---
 react_webgame/main/Table.jsx |  6 +++---
 react_webgame/main/Td.jsx    | 36 ++++++++++++++++++++++++++++++------
 react_webgame/main/Tr.jsx    |  6 +++---
 4 files changed, 39 insertions(+), 15 deletions(-)

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 = () => {
       <button onClick={onClickBtn}>시작</button>
     </div>
   );
-};
+});
 
 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 (
     <table>
@@ -13,6 +13,6 @@ const Table = () => {
         ))}
     </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 (
+    <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;
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 (
     <tr>
@@ -12,6 +12,6 @@ const Tr = ({ rowIndex }) => {
           .map((td, i) => <Td rowIndex={rowIndex} cellIndex={i} />)}
     </tr>
   );
-};
+});
 
 export default Tr;