import React, {useEffect, useReducer, useCallback} from 'react';
import Table from './Table';
const initialState = {
winner: '',
turn: 'O',
tableData: [['','',''],['','',''],['','','']],
recentCell: [-1, -1],
};
export const SET_WINNER = 'SET_WINNER';
export const CLICK_CELL = 'CLICK_CELL';
export const CHANGE_TURN = 'CHANGE_TURN';
export const RESET_GAME = 'RESET_GAME';
const reducer = (state, action) =>{
switch(action.type){
case SET_WINNER:
return {
...state,
winner: action.winner,
};
case CLICK_CELL:{
const tableData2 = [...state.tableData];
tableData2[action.row] = [...tableData2[action.row]];
tableData2[action.row][action.cell] = state.turn;
return{
...state,
tableData: tableData2,
recentCell: [action.row, action.cell],
}
}
case CHANGE_TURN:{
return{
...state,
turn: state.turn === 'O' ? 'X' : 'O',
}
}
case RESET_GAME:{
return{
...state,
turn: 'O',
tableData: [['','',''],['','',''],['','','']],
recentCell: [-1, -1],
}
}
default:
return state;
}
};
const TicTacToe=()=>{
const [state, dispatch] = useReducer(reducer, initialState);
const {tableData, turn, winner, recentCell} = state;
const onClickTable = useCallback(()=>{
console.log("onClickTable")
dispatch({type: SET_WINNER, winner: 'O'});
}, [])
useEffect(()=>{
const [row, cell] = recentCell;
if(row < 0){
return;
}
let win = false;
if(tableData[row][0] === turn && tableData[row][1] === turn && tableData[row][2] === turn){
win = true;
}
if(tableData[0][cell] === turn && tableData[1][cell] === turn && tableData[2][cell] === turn){
win = true;
}
if(tableData[0][0] === turn && tableData[1][1] === turn && tableData[2][2] === turn){
win = true;
}
if(tableData[0][2] === turn && tableData[1][1] === turn && tableData[2][0] === turn){
win = true;
}
if(win){
dispatch({type: SET_WINNER, winner: turn});
dispatch({type: RESET_GAME});
}
else{
let all = true;
tableData.forEach((row)=>{
row.forEach((cell)=>{
if(!cell){
all = false;
}
})
})
if(all){
dispatch({type: RESET_GAME});
}else{
dispatch({type: CHANGE_TURN});
}
}
}, [recentCell])
return(
<>
<Table onClick = {onClickTable} tableData={tableData} dispatch={dispatch}/>
{winner && <div>{winner}님의 승리</div>}
</>
);
}
export default TicTacToe;
위에 코드에서 onClickTable이 어떤역할을 하는지 정확히 알고싶습니다.
함수 안에 console.log을 넣어봐도 실행중에 console창에 찍히지 않고,
Table component에 props로 전달되어도 해당 component에서 쓰이는거 같지도 않고,
Table에 자식component에 전달도 안되는것을 보니 어떤 역할을 하는것인지 아무리 생각해봐도 모르겠습니다.
긴 질문 읽어주셔서 감사합니다.
