From 7ebe36041571bf03d163c6c5532bddac79f07f55 Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Sat, 13 Mar 2021 00:32:14 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react_webgame/7. 틱택토/Table.jsx             | 17 ++++++++
 react_webgame/7. 틱택토/Td.jsx                | 24 +++++++++++
 .../{main => 7. 틱택토}/TicTacToe.jsx         |  0
 react_webgame/7. 틱택토/Tr.jsx                | 20 +++++++++
 react_webgame/7. 틱택토/client.jsx            |  6 +++
 react_webgame/7. 틱택토/index.html            | 21 +++++++++
 react_webgame/main/Form.jsx                   | 43 +++++++++++++++++++
 react_webgame/main/MineSearch.jsx             | 30 +++++++++++++
 8 files changed, 161 insertions(+)
 create mode 100644 react_webgame/7. 틱택토/Table.jsx
 create mode 100644 react_webgame/7. 틱택토/Td.jsx
 rename react_webgame/{main => 7. 틱택토}/TicTacToe.jsx (100%)
 create mode 100644 react_webgame/7. 틱택토/Tr.jsx
 create mode 100644 react_webgame/7. 틱택토/client.jsx
 create mode 100644 react_webgame/7. 틱택토/index.html
 create mode 100644 react_webgame/main/Form.jsx
 create mode 100644 react_webgame/main/MineSearch.jsx

diff --git a/react_webgame/7. 틱택토/Table.jsx b/react_webgame/7. 틱택토/Table.jsx
new file mode 100644
index 00000000..14d4c1dc
--- /dev/null
+++ b/react_webgame/7. 틱택토/Table.jsx	
@@ -0,0 +1,17 @@
+import React, {memo} from "react";
+import Tr from "./Tr";
+
+const Table = memo(({ tableData, dispatch }) => {
+  console.log("table rendered");
+  return (
+    <table>
+      {Array(tableData.length)
+        .fill()
+        .map((tr, i) => (
+          <Tr rowIndex={i} rowData={tableData[i]} dispatch={dispatch} />
+        ))}
+    </table>
+  );
+});
+
+export default Table;
diff --git a/react_webgame/7. 틱택토/Td.jsx b/react_webgame/7. 틱택토/Td.jsx
new file mode 100644
index 00000000..5133653b
--- /dev/null
+++ b/react_webgame/7. 틱택토/Td.jsx	
@@ -0,0 +1,24 @@
+import React, { useCallback, useRef, useEffect, memo } from "react";
+import { CLICK_CELL } from "./TicTacToe";
+
+const Td = memo(({ rowIndex, cellIndex, dispatch, cellData }) => {
+  console.log("td rendered")
+  
+  const ref = useRef([]);
+  useEffect(() => {
+    console.log(rowIndex === ref.current[0], cellIndex === ref.current[1], dispatch === ref.current[2], cellData === ref.current[3])
+    ref.current = [rowIndex, cellIndex, dispatch, cellData]
+  }, [rowIndex, cellIndex, dispatch, cellData])
+
+  const onClickTd = useCallback(() => {
+    console.log(rowIndex, cellIndex);
+    if(cellData) {
+      return;
+    }
+    dispatch({ type: CLICK_CELL, row: rowIndex, cell: cellIndex });
+  }, [cellData]);
+
+  return <td onClick={onClickTd}>{cellData}</td>;
+});
+
+export default Td;
diff --git a/react_webgame/main/TicTacToe.jsx b/react_webgame/7. 틱택토/TicTacToe.jsx
similarity index 100%
rename from react_webgame/main/TicTacToe.jsx
rename to react_webgame/7. 틱택토/TicTacToe.jsx
diff --git a/react_webgame/7. 틱택토/Tr.jsx b/react_webgame/7. 틱택토/Tr.jsx
new file mode 100644
index 00000000..4ef97e7d
--- /dev/null
+++ b/react_webgame/7. 틱택토/Tr.jsx	
@@ -0,0 +1,20 @@
+import React, {memo, useMemo} from "react";
+import Td from "./Td";
+
+const Tr = memo(({ rowData, rowIndex, dispatch }) => {
+  console.log("tr rendered")
+  return (
+    <tr>
+      {Array(rowData.length)
+        .fill()
+        .map((td, i) => (
+          useMemo( 
+            () => <Td rowIndex={rowIndex} cellIndex={i} dispatch={dispatch} cellData={rowData[i]} >{""}</Td>,
+            [rowData[i]],
+          )
+        ))}
+    </tr>
+  );
+});
+
+export default Tr;
diff --git a/react_webgame/7. 틱택토/client.jsx b/react_webgame/7. 틱택토/client.jsx
new file mode 100644
index 00000000..7ffc6a03
--- /dev/null
+++ b/react_webgame/7. 틱택토/client.jsx	
@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDom from "react-dom";
+
+import TicTacToe from "./TicTacToe";
+
+ReactDom.render(<TicTacToe />, document.querySelector("#root"));
diff --git a/react_webgame/7. 틱택토/index.html b/react_webgame/7. 틱택토/index.html
new file mode 100644
index 00000000..e74ccd6f
--- /dev/null
+++ b/react_webgame/7. 틱택토/index.html	
@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>틱택토</title>
+    <style>
+      table {
+        border-collapse: collapse;
+      }
+      td {
+        border: 1px solid black;
+        width: 40px;
+        height: 40px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./dist/app.js"></script>
+  </body>
+</html>
diff --git a/react_webgame/main/Form.jsx b/react_webgame/main/Form.jsx
new file mode 100644
index 00000000..959bc87d
--- /dev/null
+++ b/react_webgame/main/Form.jsx
@@ -0,0 +1,43 @@
+import React, { useState, useCallback } from "react";
+
+const Form = () => {
+  const [row, setRow] = useState(10);
+  const [cell, setCell] = useState(10);
+  const [mine, setMine] = useState(20);
+
+  const onChangeRow = useCallback((e) => {
+    setRow(e.target.value);
+  }, []);
+  const onChangeCell = useCallback((e) => {
+    setCell(e.target.value);
+  }, []);
+  const onChangeMine = useCallback((e) => {
+    setMine(e.target.value);
+  }, []);
+
+  return (
+    <div>
+      <input
+        type="number"
+        placeholder="세로"
+        value={row}
+        onChange={onChangeRow}
+      />
+      <input
+        type="number"
+        placeholder="가로"
+        value={cell}
+        onChange={onChangeCell}
+      />
+      <input
+        type="number"
+        placeholder="지뢰"
+        value={mine}
+        onChange={onChangeMine}
+      />
+      <button onClick={onClickBtn}>시작</button>
+    </div>
+  );
+};
+
+export default Form;
diff --git a/react_webgame/main/MineSearch.jsx b/react_webgame/main/MineSearch.jsx
new file mode 100644
index 00000000..f73e4269
--- /dev/null
+++ b/react_webgame/main/MineSearch.jsx
@@ -0,0 +1,30 @@
+import React, { useReducer } from "react";
+import Table from "./Table";
+
+const initialState = {
+  tableData: [],
+  timer: 0,
+  result: "",
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+
+const MineSearch = () => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const { result } = state;
+  return (
+    <>
+      <Form />
+      <div>{timer}</div>
+      <Table />
+      <div>{result}</div>
+    </>
+  );
+};
+
+export default MineSearch;