[react] Tic-Tac-Toe 개선사항 4번

Tic-Tac-Toe 개선사항 4번에 대하여
When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
특정 사용자가 승리했을 때, 승리한 쪽의 사각형 3개를 highlight 처리해주고, 무승부시 무승부 메세지를 표시할 것

style.css

.highlight{
  background-color: blue;
}

Board.js

Squre.js

TicTacToe.js

우선 highlight를 표시해줄 css 추가를 하였다.

그 뒤 중복클릭과, 승리계산 로직을 분리하였고 승리판정을 담당하는 calculateWinner 함수에서 승리할 시 돌려주는 값을 승리한 위치의 배열로 변경하여, JSX에서 highlight class를 붙여줄 수 있게 하였고, 무승부에 대한 판정을 추가하였다.

drawBoard의 JSX에서 winner 변수에 접근이 가능하도록 함수의 순서를 조정하였으며,
무승부인지 판단하기 위하여 현재 진행중인 게임의 진행턴수를 Board.js가 갖고있게 수정하였다.

이번 개선사항을 수정하며 배운 것은 동적인 class 할당 및 props로 데이터 내려받기인듯하다.

그리고 5번은 사실 처음에 수정하면서 같이 수정해버려 이미 되어있어서 생략할 것이다.