이제 이 앱을 마무리 하기 위하여
마지막 새로운 컴포넌트인 GameOver 컴포넌트를 추가하겠습니다
이 컴포넌트는 게임이 마무리 되면 보여질 부분입니다
여기서 이 아이디어는 간단히
누가 이겼는지를 보여주는 멋진 화면과
다시 시작할 수 있는 버튼을 표시하는 것입니다
따라서 이를 위해 여기서 다시
GameOver 함수 컴포넌트를 내보내고
그 안에 스타일링을 위해 더한
game-over라는 ID를 가진
div 를 반환할 수 있습니다
그리고 그 안에 'Game Over!' (게임 오버!) 라고 표시된
h2 요소를 추가할 수 있습니다
그리고 여기서 우승자의 상징이나 이름을
속성로 받아서 이곳에 출력할 것으로 예상합니다
당연히 무승부가 있을 수도 있습니다
따라서 우리의 App 컴포넌트 내에서
이것 또한 확인해야 합니다
그러나 우선, 간단하게 여기에 {winner} won! 이라는 p태그를 추가하여
승자의 이름을 출력해 봅시다
그리고 그 아래 button을 포함하는
또 하나의 p 태그를 추가합니다
이것은 우리가 게임을 재시작할 수 있게 하고
로직은 추후에 추가할 예정입니다.
이제 이 기본적인 GameOver 컴포넌트가
App 컴포넌트 뒤에 추가된 상태에서, 만약 우승자가 있다면
우리는 여기 GameOver 컴포넌트를 활용합니다
따라서 여기서 우리는 ./components/GameOver.jsx 으로부터
GameOver를 불러옵니다
그리고 만약 우승자가 있면 여기 아래서 이 컴포넌트를 활용합니다
그리고 이제 당연히 우리는 우승자의
이름이나 상징을
이 winner 속성를 통해 GameOver 컴포넌트로 전달해야 합니다
현재 winner 변수에는
symbol만 있기에
그것을 여기에 전달할 것입니다
이제 이것을 가지고, 다시 로드하면
이제 이길 때, 다음과 같은 게임 오버 화면이 나타납니다
당연히 여기 있는 버튼은 작동하지 않지만
우리는 화면을 얻는 데에는 성공했습니다
그러나 다음과 같이
무승부로 끝나게 된다면
우리는 문제를 마주합니다
이 상황에서도, 당연히 또
게임 오버 화면이 나타났으면 좋겠습니다
따라서 우리는 App 컴포넌트 내에서 승자를 도출하고
무승부인 상황을 처리하는
로직을 조정해야 합니다
질문은 당연히 우리가 어떻게
무승부인지를 알 수 아는가 라는 겁니다
여기서 우리는 모든 이길 수 있는 조합을 확인하고 있습니다
그래서 우리는 당연히 우승자가 있다면 확인하고,
모든 필드가 채워져 있다면 무승부일 것입니다
그리고 우리는 항상 9개의 필드가 있음을 알고 있습니다
따라서 당연히 우리는 최대 9번의
게임 턴이 있을 것이라는 것도 알고 있습니다
이 로그에서 확인할 수 있습니다
여기 우리는 9개의 명단을 가지고 있습니다
그래서 우리는 아마도 여기서 우승자를 도출한 후에
만약 우승자가 없으나
9번의 차례가 끝났다면
무승부라는 것을 알 수 있습니다
따라서 우리는 hasDraw 라는 이름을 가진 상수를 추가할 수 있고,
gameTurns.length가 9라면 hasDraw는 true가 됩니다
즉, 이 게임에서 9번의 차례가 있었고 우승자가 없을 경우입니다
우리가 가질 수 있는 모든 차례가 지났으나
우승자가 없는 것입니다
이때 우리는 무승부를 얻고
그리고 이제 여기 아래 hasDraw 상수를 활용하여
승자가 있는 경우나
hasDraw가 true인 경우에
게임 오버 화면을 표시하기 위해 이를 먼저 확인하도록
이 부분을 괄호로 둘러싸야 합니다
따라서 만약 우리가 우승자가 있거나 hasDraw 가 true라면
이 GameOver 컴포넌트가 보여지고
여기 GameOver 컴포넌트 안에
우리는 우승자가 항상 설정되지 않을 수 있다는 것을 알게 됩니다
이것은 우승자 때문이 아닌 무승부로 인해서
GameOver 컴포넌트가 표시될 수 있기 때문입니다
그렇기에 우승자는 정의되지 않을 수 있고
따라서 여기서 우리는 오직 이 p태그만을 렌더링 하고 싶습니다
우승자가 정해지거나
반대로는 아닌 경우입니다
따라서 만약 우승자가 정해지지 않았다면, 정의되지 않았다면
우리는 'It's a draw!(무승부입니다!)' 라는 p 태그를 렌더링 하고 싶습니다
여기서 이 프로젝트는 기술적으로 올바르나
이 하나의 코드에 대해
경고를 띄우고 있습니다
이것을 제거하기 위해
여기서 이 코드를 사용하여 이 코드를 대체하겠습니다
이로써 이것을 저장한다면
이제 It's a draw!(무승부입니다!) 화면을 얻게 됩니다
반대로 다음과 같이 이긴다면
Game Over! X won! (게임 오버! X가 이겼습니다!) 를 얻게 됩니다
그리고 반대로 무승부를 위해 다음과 같이 다시 시도한다면
It's a draw!(무승부입니다!) 를 얻게 됩니다
이제 훨씬 나아졌습니다
당연히 여기 있는 Rematch! (재대결!) 버튼 또한 작동하게 할 것입니다