게임판 컴포넌트에서
이 activePlayerSymbol 속성을 삭제하고
onSelectSquare 속성을 사용하여
버튼의 onClick 속성에 대한 값으로 사용하겠습니다
즉 이 컴포넌트 안에서는 더 이상 게임 상태를
제어하지 않겠습니다
대신에 상태를 끌어올리겠습니다
물론 이 gameBoard 부분을 수정해야 합니다
이것을 사용해서 격자로 매핑을 하려고 하는데
이것 이전에 할 일이 있습니다
일단 이 컴포넌트는 이대로 두고
이 useState를 가져오는 부분도 삭제하겠습니다
이제 다시 앱 컴포넌트로 돌아가겠습니다
여전히 실행된 것은 handleSelectSquare인데
이 onSelectSquare 속성의 도움을 받고 있습니다
이 속성은 게임판 버튼을 클릭할 때 전달됩니다
이 부분은 아직 실행되고 있지만
handleSelectSquare에서는 수를 업데이트하겠습니다
이 과정에 이 함수형 접근방식을 사용하는데
새로운 수에 대한 배열은
이전 수 배열에 기반하기 때문입니다
여기에 새로운 인풋을 생성하겠고 싶은 것입니다
이 위치는 게임에 사용된 수에 대한 배열인데
엔트리 생성을 위해서 updateTurns라는 상수를 만들어
이미 생성된 수를 복사하겠습니다
이미 배우셨듯이 이것을 업데이트할 때는
불변하는 방식으로 해야 합니다
여기에는 새로 나온 수를 넣겠습니다
즉 어떤 플레이어가 어떤 버튼을 눌렀는지에 대한 정보를
이전 턴 앞에 두어서
배열의 첫 항목이 언제나 최신 수가 되도록 하겠습니다
그 작업을 위해 배열 안에 새로운 것을 만들겠습니다
이제 확인해야 할 내용은 각 수에 대한 정보가
어떻게 보여야 할 지에 대해서입니다
이것을 적용하는 데에는
다양한 방법이 있지만
일단은 여기에 객체를 하나 저장해서
gameTurns 상태가 결국 객체로 채운 배열이 되도록 하고
어떤 플레이어가 어떤 버튼을 눌렀는지에 대한 정보를 주고
행과 열 인덱스를 통해
각 버튼 위치에 대한 정보도 주도록 하겠습니다
그러므로 handleSelectSquare에서
어떤 행과 어떤 열의 버튼을 눌렀는지
혹은 어떤 rowIndex와 colIndex를 선택했는지를 알아야 합니다
이 객체를 updatedTurns 배열에 더함으로써
각 버튼을 중첩 객체로 묘사하고
행을 rowIndex와 대응시키고
열을 colIndex와 대응시키겠습니다
이 차례에 대한 배열에 더할 객체는 이 정도로 하겠습니다
이제 알아야 하는 것은
어떤 플레이어가 버튼을 눌렀는지입니다
그러므로 이 수 객체에
플레이어 속성을 더하겠습니다
여기에서는 activePlayer를 사용하여 현재 진행 중인
플레이어의 기호를 저장하겠습니다
이것은 아주 이상적인 작업은 아닙니다
activePlayer를 사용하는 것은
두 종류의 상태를 병합하는 것과 같기 때문입니다
그리고 이 함수형 폼(form)을 사용해서
gameTurns 상태를 업데이트하고 있는데
이 이유는 아까 언급한대로
실행 시점 조율에 대한 상태 업데이트가 실행되도록 하기 위함입니다
여기에서는 가장 최신 상태를 사용하지만
완전히 확신할 수 없는 것은
activePlayer에게 있어서 이것은 다른 상태이기 때문입니다
그러므로 현재 진행 중인
기호를 받아오는 더 나은 방식은
이 함수에 새 변수를 생성하는 것입니다
이 함수는 상태 변경 함수로 전달하는 것입니다
이름은 currentPlayer로 하겠습니다
기본값은 일단 X로 하겠습니다
이제 여기에 조건문을 더해서
prevTurns에 대한 배열에
첫 요소를 살펴보겠습니다
이것은 언제나 가장 최신의 차례여야 합니다
이 요소에서 플레이어가 X인지 먼저 확인하겠습니다
즉 이미 prevTurns에 저장된 가장 최신의 차례 정보에 따라
가장 최근에 플레이어가 클릭한 기호가 X라면
currentPlayer를 O로 설정하겠습니다
이렇게 하면 이제 기호가 O인 플레이어가
게임을 할 차례라는 것을 알 수 있습니다
가장 최근에 클릭한 버튼은
기호 X인 플레이어의 차례였기 때문입니다
물론 가장 최신의 차례가 저장되지 않은 경우도 있습니다
예를 들어 이것은 초기에는 빈 배열이므로
여기에 조건을 하나 더 달아야 합니다
이전의 Turns.length가 0보다 큰지 확인하기 위해서입니다
그리고 가장 최신의 차례는 이 플레이어가 낸 것이 됩니다
이렇게 하면 나온 차례가 하나라도 있을 경우
가장 최신의 차례를 보게 됩니다
그리고 이 currentPlayer 정보를 보겠습니다
이 정보는 차례에 대한 상태 (prevTurns)에서 가져온 것으로
이제 차례를 두어야 하는 플레이어의
기호를 설정하기 위함입니다
이 작업을 끝내면
이렇게 업데이트된 배열(updatedTurns)이 나옵니다
그리고 이 updatedTurns는
gameTurns 상태에 대한 새로운 값으로서 반환됩니다
그 이유는 이것이 결국
이 상태 업데이트 함수가 하고자 하는 것이기 때문입니다
이 상태 업데이트 함수는 꽤 긴 편이지만
이후 다른 리액트 프로젝트에서
종종 볼 수 있는 정도의 분량입니다
이 함수는 우리가 상태를 불변한 방식으로 업데이트하고
다른 상태를 병합하지 않도록 해 줍니다
이 작업을 완료함으로써 이제
gameTurns 상태를 로그와 게임판 모두를 위해 사용할 수 있습니다
이 부분을 다음 시간에 함께 작업해 보겠습니다