플레이어의 순서 체크
컴포넌트에 초기 state를 수정하는 것으로 기본값을 설정할 수 있다.
Board.js
- 플레이어가 수를 둘 때마다 다음 플레이어가 누군지 결정하는 state를 저장 위해서
그리고, 두는 순서에 따른 표시 [ X , O ] 교체를 위한 수
const [xIsNext, setXIsNext] = useState(true);
const handleClick = (i) => {
const newSquares = squares.slice(); // slice로 통째 복사
newSquares[i] = xIsNext ? "X" : "O";
setSquares(newSquares);
setXIsNext(current => !current);
삼항연산자 사용해서,
중첩 if를 쓰지 않고, 한 줄에 if ~ else ~ 구문을 넣을 수 있다.
a = xIsNext? "X" : "0";
xIsNext가 true이면 "X" 아니면 "O"를 a 변수에 넣는다.
승자 결정하기
승부를 계산하는 함수 만들기.
X든 O든 한 줄로 같으면 되기에 lines에 그 경우에 수를 다 나열해 둔 후
for문에서 만약 한 줄로 같은 줄이 나오면 한 줄로 나열된 X / O를 return 해준다.
const calcWiner = (squares) => {
const lines = [
[0,1,2],
[3,4,5],
[6,7,8],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
]
for (let i = 0; i < lines.length; i++) {
const [a,b,c]=lines[i];
if(squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
}
return null;
}
const winer = calcWiner(squares); // 승자계산 결과 값
승자 표시
const winer = calcWiner(squares);
let status;
if (winer) {
status = "Winner: " + winer;
} else {
status = "Next Player: " + (xIsNext? "X" : "O");
}
return (
<div>
<div className="status">{status}</div>
승부가 결정 & 같은 위치에 놓으려 하는 것을 방지하기.
const handleClick = (i) => {
const newSquares = squares.slice(); // slice로 통째 복사
if(calcWiner(newSquares) || newSquares[i]) {
return;
}
