react web game : 지뢰찾기

2021-03-13 00:32:14 +09:00
parent b8357a8d3a
commit 7ebe360415
8 changed files with 161 additions and 0 deletions
--- a/틱택토/Table.jsx
+++ b/틱택토/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;
--- a/틱택토/Td.jsx
+++ b/틱택토/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;
--- a/react_webgame/main/TicTacToe.jsx
+++ b/react_webgame/main/TicTacToe.jsx
--- a/틱택토/Tr.jsx
+++ b/틱택토/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;
--- a/틱택토/client.jsx
+++ b/틱택토/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"));
--- a/틱택토/index.html
+++ b/틱택토/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>
--- a/react_webgame/main/Form.jsx
+++ 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;
--- a/react_webgame/main/MineSearch.jsx
+++ 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;