TICTACTOE 만들기 5 ( 'O' 추가하기, 승자 결정하기)

 

● 순서를 만들어서 'O' 추가하기

 

첫 번째 차례를 'X' 로 시작하도록 해주기 위해 Board 컴포넌트에 초기 state를 수정하는 것으로 기본값을 설정한다.

(원래는 null로 되어있는 것을 첫번째는 'x'로 두번째는 'o'로 해준다.)

xIsNext의 초기값을 true로 해서 true일 때는 null을 x로, false일 때는 null을 o로 설정

 

- const[] .... 이렇게 일일히 모두 쳐도 되지만 useStateSnippet을 사용하면 자동으로 코드구조가 완성되어 나타난다. 

 

 

 

플레이어가 수를 둘 때마다 xIsNext (boolean 값)이 뒤집혀 다음 플레이어가 누군지 결정하고 게임의 state가 저장된다.

Board의 handleClick 함수를 수정하여 xIsNext 값을 뒤집는다.

조건부 삼항 연산자 사용

 

 

저 위에서 setXIsNext( !xIsNext ) 와 setXIsNext( prev => !prev)를 둘다 사용해도 되지만 둘의 차이점은

setXIsNext( !xIsNext ) 이 코드를 2번 연속 적었을 경우 2번 적었다 해도 통으로 1번만 실행되지만

setXIsNext( prev => !prev) 를 2번 연속 적으면 원하던대로 2번 실행되는 것을 확인 할 수 있다.

 

즉, 만약 number를 위에서 const[number, setNumber] = useState(0); 로 0으로 초기화 시킨 다음에

setNumber(number +1);

setNumber(number +1);

이렇게 하면 2로 나와야 할 number가 1로 나오게 되고

 

setNumber(prev => prev + 1);

setNumber(prev => prev + 1);

이렇게 하면 number는 2로 나오게 된다.

 

 

 

그래서 !xIsNext 대신 prev => !prev 를 사용하고 실행해보면 x 부분을 다시 클릭했을 시 o로 변경되는 것을 확인 할 수 있다.

 

 

 

Board의 rendering 하는 부분에 있는 "status" 텍스트도 바꿔서 어는 플레이어가 다음 차례인지 알려주도록 해준다.

벡틱 해줘야 함 (`)

 

그리고 return 문으로 가서 직접 쓰여있던 Next Player:X,O 대신에 {status}를 넣어준다.

 

 

그러고 다시 실행시키면 다음 차례를 나타낼 수 있다.

 

 

 

 

 

● 승자 결정하기

어떤 선수가 다음 차례인지 알려주는 부분을 했으니

이번에는 승부가 나는 때와 더 이상 둘 곳이 없을 때를 알려주는 코드를 작성해본다.

 

 

- 승부 결정하는 걸 계산하는 함수 만들기

 

이길 수 있는 모든 경우의 수를 다 나열해준다.

 

X이든 O이든 한 줄로 같으면 되기에 lines에 그 경우의 수를 다 나열해 준 다음에 for문에서 만약 한 줄로 같은 줄이 나오면 한 줄로 나열된 X 혹은 O를 return 해준다.

(tabnineAI 라는 확장프로그램을 사용하게 되면 자동으로 내가 뭘 칠지 예상해서 보여준다.)

 

먼저 위에서 const를 사용해 winner 변수를 만들어 준다.

 

 

그리고 밑에서 함수 calculateWinner를 작성해준다.

모든 경우의 수를 작성해준 뒤 for문을 사용해 a와 b, c 를 비교해서 승자를 결정하도록 해준다.

( 이 코드는 winner 변수보다 앞에 작성되어야 const winner = calculateWinner(squares) 를 사용할 수 있다.

아니면 calculateWinner가 정의되지 않았다는 오류가 발생한다.

: 'calculateWinner' was used before it was defined  no-use-before-define)

 

 

 

- 승자 표시해주기

위의 const winner와 const status를 if문을 사용해서 승자가 있을 경우와 없을 경우를 나누어 변경시켜준다.

 

 

 

모두 작성하고 실행시켜보면 한줄이 완성된 x가 winner라고 나오게 되는 것을 확인할 수 있다.

 

 

 

 

- 누군가가 승리하거나 Square가 이미 채워졌다면 Board의 handleClick 함수가 클릭을 무시하도록 설정

 

return; 을 해줌으로써 더 이상 코드가 작동되지 않도록 해준다.

 

 

square의 css도 변경을 해준다.

 

 

 

 

 

 

 

 

<전체코드>

- Board.js 코드