react web game : reducer, dispatch, action

react_webgame/main/Table.jsx

@@ -1,8 +1,16 @@
 import React from "react";
 import Tr from "./Tr";
 
-const Table = () => {
-  return <Tr></Tr>;
+const Table = ({ onClick, tableData }) => {
+  return (
+    <table onClick={onClick}>
+      {Array(tableData.length)
+        .fill()
+        .map((tr, i) => (
+          <Tr rowData={tableData[i]} />
+        ))}
+    </table>
+  );
 };
 
 export default Table;

react_webgame/main/TicTacToe.jsx

@@ -1,9 +1,9 @@
-import React, { useState, useReducer } from "react";
+import React, { useState, useReducer, useCallback } from "react";
 import Table from "./Table";
 
 const initialState = {
   winner: "",
-  turn: "0",
+  turn: "O",
   tableData: [
     ["", "", ""],
     ["", "", ""],
@@ -11,22 +11,30 @@ const initialState = {
   ],
 };
 
-const reducer = (state, action) => {};
+const SET_WINNER = "SET_WINNER";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case SET_WINNER:
+      return {
+        ...state,
+        winner: action.winner,
+      };
+  }
+};
 
 const TicTacToe = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  // const [winner, setWinner] = useState("initialState");
-  // const [turn, setTurn] = useState("0");
-  // const [tableData, setTableData] = useState([
-  //   ["", "", ""],
-  //   ["", "", ""],
-  //   ["", "", ""],
-  // ]);
+  const onClickTable = useCallback(() => {
+    console.log("onClickTable");
+    dispatch({ type: SET_WINNER, winner: "O" });
+  }, []);
+
   return (
     <>
-      <Table />
-      {winner && <div>{winner}님의 승리</div>}
+      <Table onClick={onClickTable} tableData={state.tableData} />
+      {state.winner && <div>{state.winner}님의 승리</div>}
     </>
   );
 };

react_webgame/main/Tr.jsx

@@ -1,8 +1,16 @@
 import React from "react";
 import Td from "./Td";
 
-const Tr = () => {
-  return <Td>{""}</Td>;
+const Tr = ({ rowData }) => {
+  return (
+    <tr>
+      {Array(rowData.length)
+        .fill()
+        .map((td) => (
+          <Td>{""}</Td>
+        ))}
+    </tr>
+  );
 };
 
 export default Tr;

react_webgame/main/client.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDom from "react-dom";
 
-import Lotto from "./Lotto";
+import TicTacToe from "./TicTacToe";
 
-ReactDom.render(<Lotto />, document.querySelector("#root"));
+ReactDom.render(<TicTacToe />, document.querySelector("#root"));

react_webgame/main/index.html

@@ -7,7 +7,7 @@
         border-collapse: collapse;
       }
       td {
-        border: 1ps solid black;
+        border: 1px solid black;
         width: 40px;
         height: 40px;
         text-align: center;