저번 시간에는 우승 조합을 모두 가져왔습니다
이제 여기에 코드를 더해서
매 차례마다 동적으로
해당하는 조건이 있는지 확인할 것입니다
매 차례마다 우승 조건을 확인하기 위해
handleSelectSquare 안에 로직을 더하겠습니다
이 함수가 실행되는 시점이
버튼이 클릭되었을 때이기 때문입니다
이것이 이 작업의 첫 번째 단계입니다
그 다음에는 상태를 하나 더해서
우승자가 있는지를 확인할 수 있는
정보를 제어할 수 있게 하겠습니다
이름은 hasWinner과 setHasWinner로 하고
초기에는 false로 설정하겠습니다
handleSelectSquare에서는
우승 조합 중 활성화된 것이 있는지 확인하겠습니다
만약 있다면 hasWinner를 true로 설정하고
아니라면 false로 두겠습니다
이 부분은 잘못되지는 않았지만 불필요합니다
동일한 내용을 반복하기 때문입니다
우승자가 있는지 여부를 확인하는 이 정보는
gameTurns에서 이미 파생되었으므로
handleSelectSquare에서도
우승자 여부를 확인할 필요가 없습니다
앱 컴포넌트 함수에서 이미
매 차례마다 실행하고 있기 때문입니다
사실 버튼을 클릭할 때마다
이 GameTurns 배열을 업데이트하고 있습니다
그러므로 이미 배우셨듯
이 앱 컴포넌트 함수는
매 차례마다 재실행됩니다
리액트에서 데이터와 상태를 다룰 때는
이렇게 하시는 것이 좋습니다
이 작업은 연습과 실습 그리고
경험이 필요한 부분이지만
정확히 그것을 위해 이 수업에서 함께 이런 사고방식을
다루고 있는 것입니다
gameTurns에서 파생시키려는 것은
우승자가 있는지에 대한 여부입니다
파생을 위해 컴포넌트 함수 내에서
WINNING_COMBINATIONS의 combinations를
재실행될 때마다 모든 조합을
일일히 대조할 수 있습니다
즉 매 차례마다 모든 우승 조합을
검토하는 것입니다
여기에는 경우의 수인 조합이
그렇게 많지 않으므로
이 작업은 아주 빠릅니다
결과가 거의 순식간에 나오는 것입니다
이 for 반복문에서 우승 조합을
확인하기 위해서는
일단 첫 번째 버튼의 기호를 가져오도록 하겠습니다
그 이유는 모든 우승 조건은
버튼 세 개의 조합이고
각 버튼은 행과 열로 식별됩니다
이것이 각각의 이름입니다
여기에서 해야 하는 작업은
이 gameBoard를 살펴보는 것인데
이것은 현재 다른 컴포넌트에 있습니다
이 부분은 조금 있다가 해결하겠습니다
이 중첩 배열에 있는 안쪽 요소들 또한
살펴봄으로써
여기에서 나온 기호를 살펴보겠습니다
엄밀히 말하자면
이 상수의 특정 위치에서 나온 기호를
저장하는 것입니다
동일한 과정을 두 번째 버튼과 세 번째 버튼에
반복하여 가능한 우승 조합을 검토합니다
게임판에서 기호를 추출해내서
여러 요소들을 검토하여
하나의 우승 조건을 충족하는지 보는 것입니다
이 방식의 문제점은
게임판이 게임판 컴포넌트 안에 있지만
이것을 앱 컴포넌트에서도 사용해야 한다는 점입니다
해결법은 단순히 코드를 옮기는 것입니다
이 코드와 gameBoard 컴포넌트는
게임판의 연산을 담당하고 있는데
이것을 여기에서 잘라내어
앱 컴포넌트로 옮기면 됩니다
activePlayer를 파생시킨 다음에 두겠습니다
이제는 초기 상태 게임판을 잘라내어
앱 컴포넌트 밖으로 옮기겠습니다
여기나 import문 아래에 두도록 하겠습니다
위치는 임의로 정하시면 됩니다
이제 게임판을 앱 컴포넌트 안에서
파생시키므로
turns를 이제 gameTurns로 대체시키겠습니다
여기 있는 gameTurns 상태입니다
이제 이것을 아래쪽에서도 사용하겠습니다
이제 필요한 것은 gameBoard와
GameBoard 컴포넌트이므로
이 GameBoard 컴포넌트에
보드(board) 속성을 더해서 gameBoard를 가져오겠습니다
gameBoard는 앱 컴포넌트에 값으로서 파생되었습니다
이제 GameBoard 컴포넌트는
turns 속성 대신에
board 속성을 가져오게 됩니다
이제 이 board 속성을 아래쪽에서 사용할 수 있습니다
이제 이 GameBoard 컴포넌트가
더 간결해졌습니다
그리고 이 값을 더는 컴포넌트 내부에서
연산하지 않습니다
물론 이제 이 값은
다른 컴포넌트, 앱 컴포넌트에서 연산하고 있습니다
이 작업의 장점은
이제 여기에 gameBoard가 있으므로
게임판에 저장되어 있던 다양한 기호를
추출해올 수 있습니다
특히 우승 조건에 부합하는
특정 위치에 있는 기호를 볼 수 있습니다