따라서 이것이 우리가
플레이어의 데이터를 업데이트하는 방법입니다
그리고 이제 우리는
handlePlayerNameChange가 촉진될 때마다
Player 컴포넌트 내에서 이루어지도록 해야 합니다
이 변경 사항은
Save(저장)이라는 버튼을 누르면 확인됩니다
따라서 첫 번째 단계로
우리는 포인터를
이곳 handlePlayerNameChange 함수에서
Player components로 이동시킬 수 있습니다 예를 들어
onChangeName이라는 프로퍼티를 이용합니다
우리는 이것을 당연히 두 플레이어에 모두 해야 합니다
Player 컴포넌트 내에서 우리는
onChangeName 속성을 구조 분해 할당하고
여기서 수락해야 합니다
그리고 여기 Edit(수정) 버튼이 클릭될 때마다 촉진되는
handleEdit 함수에서
우리는 onChangeName를 호출하고
첫 번째 전달 인자로 symbol을 전달합니다
왜냐하면 handlePlayerNameChange에서
우리는 첫 번째 parameter 로 symbol를 기대하고
두 번째 매개변수 로 newName을 예상하기 때문입니다
따라서 Player 컴포넌트 내에서
onChangeName으로 전달하는 두 번째 인자는
이 playerName 이며
이것은 여기 playerName 상태에
현재 저장되어 있는 것입니다
즉 이것은 당연히
이 함수가 우리가 편집을 시작하면
촉발된다는 것을 의미하며
따라서 우리는 여기에
if ( isEditing) { }를 추가하고
만약에 이런 상황이라면 우리는 오직 onChangeName만을 호출합니다
왜냐하면 만약 isEditing이 true라면
우리가 단지 그 버튼을 눌러서 편집을 멈춘 것을 의미합니다
따라서 우리는 이 함수를 발생하게 하고 싶습니다
이제 이로써 여기 App 컴포넌트 내에
우리는 이 players 상태를 활용하여
게임이 끝났을 때
올바른 플레이어의 이름을 보여줄 수 있습니다
따라서 여기 우리의 우승자 로직으로 내려가서
winner = 우승한 플레이어의 기호(firstSquareSymbol)로
설정하는 것 대신에
여기 players 상태를 활용하여
동적으로 속성에 접근하여
이긴 플레이어의 이름을 도출할 수 있습니다
그리고 우리가 접근하고 싶은 속성은
firstSquareSymbol 안에 저장되어 있습니다
왜냐하면 이것은 X 혹은 O 이기 때문입니다
그리고 이것들은 정확히, 이곳에 가지고 있는 두 가지 속성입니다
다시 말해
속성 이름이 하드 코딩(고정된 값의 코딩)으로 되어 있지 않고
어떠한 변수나 상수에
저장되어 있는 경우
동적으로 속성에
접근하는 표준 자반스크립트 문법입니다
이로써
만약 우리가 저장하고 다시 로딩한다면
우리는 이기고
이긴 플레이어의 이름을 볼 수 있을 것입니다
그리고 당연히 제가 재시작한다면
이름을 바꾼 다음
이긴다면
다음과 같이, Max won! (Max가 이겼습니다!)라고 뜨게 됩니다
이로써 우리는 마침내 게임을 마무리하였고
게임을 플레이하기 위해 필요한
모든 기능을 가지게 되었습니다