언급했듯이, 이 게임의
기능적인 면은 끝났습니다
이제 코드를 조금 더 개선하고자 합니다
정밀하게 하기 위해
이 App 컴포넌트를 조금 정리하면서 코드를 개선하고자 합니다
왜냐하면 많은 로직을 포함하고 있기 때문입니다
이 로직이 필요하긴 하지만
우리는 분명히 조금 정리할 수 있습니다
예를 들어, 여기 누가 이겼는지 정하는 것을 담당하고 있는
이 블록 전체는
함수로 아웃소싱될 수 있습니다
이것은 우리가 어떤 플레이어가 활동 중인지를
도출하기 위한 로직을 아웃소싱한 것과 같습니다
따라서, 저는 App 컴포넌트의 외부에
deriveWinner라는 새로운 함수를 추가합니다
그런 후 이 코드를 이 함수에 붙여 넣습니다
이제 이 함수에서 우리는 gameBoard와
players 데이터를 매개변수로 허용하기 위해 모두 필요합니다
그리고 당연히 마지막에는
이것이 헬퍼 함수이기에
우리는 반드시 우승자 변수를 반환해야 합니다
이것은 이긴 우승자의 이름 혹은 정의되지 않거나 둘 중 하나 입니다
이제 여기에 deriveWinner가 추가되었고
여기 있는 코드를 단순화할 수 있습니다
그리고 App 컴포넌트에서 제거합니다
그리고 우리가 이것을 절대 덮어쓰지 않기에
그냥 지금 winner 상수를 추가합니다
이것은 deriveWinner와 같습니다
그리고 우리는 그냥 gameBoard와
players 상태를 이 deriveWinner 함수에 전달합니다
이게 하나의 단계입니다
이제 게임판을 도출하는 로직도
아웃소스 할 수 있습니다
그리고 이것은 기존 아이디어와 동일합니다
따라서 여기 컴포넌트 함수 외부에
혹은 가능하다면 완전히 다른 파일에서도
또한 가능합니다
이 파일 내에서가 아니어도 되지만
그들이 가깝게 관련되어 있기에
같은 파일 내에 함께 유지하도록 하겠습니다
새로운 함수 deriveGameBoard를 추가하도록 하겠습니다
그리고 이 함수에 이 코드를 붙여 넣겠습니다
따라서 여기서 우리는 이 gameTurns 가 필요합니다
그리고 당연히 여기서는
gameBoard를 반환해야 하고
다음으로 App 컴포넌트의
deriveGameBoard 를 활용하여
game board = derive game board 를 설정합니다
그리고 우리의 gameTurns를 이 함수로 전달합니다
이로써 이 App 컴포넌트는 훨씬 더 간결해졌습니다
또한 우리는 더 이상 필요하지 않은
이러한 주석도 삭제할 수 있습니다
그리고 알 수 있듯이
이 App 함수는 이미 훨씬 더 가독성이 높아졌습니다
이제 한 가지 더 우리가 할 수 있는 것은
아마 initialGameBoard 위에
import문 바로 아래에, PLAYERS 라는 이름을 가진 새로운 상수를 추가하는 것입니다
그리고 이것은 객체입니다
이 객채에서는 Player 1 이라는
X 속성과
Player 2 라고 하는 O 속성을 가집니다
이곳에 있을 때, 우리는 initialGameBoard의 이름도
다른 명명 스타일과 일치하도록 변경할 수 있습니다
여기서는 모두 대문자이며
단어들은 밑줄로 구분된 스타일입니다
이것은 기술적으로 당연히 필수는 아니지만
이 애플리케이션을 위해 정의된
일반 상수라는 것을 확실히 합니다
하지만 이 PLAYERS 상수와 관련하여 이제 저의 아이디어는
우리가 이 App 컴포넌트의 이 부분을
우리의 초기 상태로 활용하여
더 간결하게 만드는 것입니다
그리고 여기서 initialName을
동적으로 설정하고 있는 Player 컴포넌트를 사용하는 부분에서도
여기에서 PLAYERS.X 와 여기에서 PLAYERS.O를 액세스하고 있습니다
이것을 하는 이유는 이전에
Player 컴포넌트를 위해
Player 1 과 Player 2 를 하드코드(고정된 값의 코딩) 하였기 때문입니다
그리고 이것은 초기 상태를 위함이였습니다
따라서 만약 우리가 한 번이라도 이 플레이어 이름을 변경한다면
두 곳에서 해야만 하고 그건 이상적이지 않습니다
그것이 바로 지금 이것을 하는 이유입니다
그리고 initialGameBoard의 이름을 바꾸었기 때문에
이 deriveGameBoard 함수에서
이것 또한 조정해야 합니다
이로써 저는 이 App 컴포넌트가 상당히 괜찮게 보이고
간결하게 보인다고 말할 수 있을 것 같습니다
다시 로딩한다면, 이전과 같이 게임이 그대로 작동해야 하고
작동되고 있습니다
Player 2로 우승을 시도해봅시다
이것 또한 작동하기에 이 애플리케이션은 마무리가 되었습니다
그리고 이 과정에서
단순히 컴포넌트와 상태 작업과 관련된
추가 경험을 쌓은 것 뿐 아니라
모든 리액트 개발자가 알아야 할
많은 중요한 패턴과
약간 더 심화된 개념에 대해 학습했습니다