이 시점에 이 게임이
거의 마무리가 되었습니다
하나만 있다면 더 좋을 것 같습니다
기존에는 이겼을 때, X won (X가 이겼습니다) 혹은 O won (O가 이겼습니다) 로 표기했습니다
그리고 당연히 이것은 괜찮습니다
우리는 이것이 무슨 의미인지 압니다 그러나 이것 대신에
다음과 같이 보여준다면 더 나을 것 입니다
Player 1 혹은 Player 2 같이 이긴 플레이어의 이름을 적습니다
혹은 우리가 이름을 수정한다면 당연히 수정한 이름으로 말입니다
이제 이것은 당연히 우리가 App 컴포넌트 내에
플레이어의 이름에 대한 정보가 필요한 것을 의미합니다
왜냐하면 그곳이 우리가 우승자를 불러오는 곳이기 때문입니다
그리고 현재 플레이어의 이름 정보는
Player 컴포넌트 내에 저장되어 있습니다
그곳은 우리가 플레이어의 이름을 편집하고 저장하는 곳입니다
그리고 우리는 애플리케이션 내의 그 어떤 부분하고도
이 이름을 공유하지 않습니다
따라서 우리는 Player 컴포넌트로부터
플레이어의 이름들을 얻어서
App 컴포넌트로 가져와야 합니다
이제 여러분은 이 상태를 다시 끌어 올리고 싶다고 생각할 수 있습니다
아마도 이 플레이어 이름 상태를
Player 컴포넌트에서 App 컴포넌트로 끌어올리고 싶을 수 있습니다
그러나 그것은 틀렸습니다
이렇게 하는 것은 잘못된 방법인 이유는 이 플레이어 이름 상태는
사실 매 타이핑마다 이 입력 필드를
업데이트 하는 것에 사용되기 때문입니다
그리고 만약 우리가 이것을 Player 컴포넌트로부터 이동시키려 한다면
App 컴포넌트 전체가 매 타이핑마다
재평가된다는 것을 의미하게 됩니다
이것은 또한 게임 보드 전체가 매 타이핑마다
재평가 되는 것을 의미하기도 합니다
그리고 그것은 매우 중복되는 것이며 우리가 하고자 하는 것이 아닙니다
추가적으로, 이 플레이어 이름 상태를
Player 컴포넌트로부터 끌어 올리는 것 또한 당연히 까다롭습니다
왜냐하면 우리는 이 Player 컴포넌트를 두 번 사용하고
각 컴포넌트가 고유의 이름을 관리해야 하기 때문입니다
따라서 Player 컴포넌트는 지금 방식으로
그대로 유지되어야 합니다
대신 여기에, App 컴포넌트에
useState를 활용하여 단순히 새로운 상태를 추가합니다
이곳은 최근 설정된 플레이어의 이름을 저장하는 곳입니다
그리고 이 상태는 초기에
Player 1과 Player 2와 같이 두 개의 이름이 있는 배열이 될 수 있습니다
하지만 이 플레이어의 이름들이
그들의 기호에 단단히 연동되어 있기에
제 생각에는 맵으로 객체를 사용하는 것이 더 의미 있다고 생각됩니다
즉, 여기서 키 X 와
해당 키에 대한 값은 Player 1 이고
키 O는 두 번째 플레이어이며 그것은 Player 2입니다
그런 후, 당연히 우리는 useState 에서
얻은 배열을 분해 구조 할당할 수 있습니다
여기 우리는 players와
setPlayers 상태 업데이트 함수를 가지고 있습니다
이제 setPlayers는 우리가 Player 컴포넌트 내에서
저장 버튼을 누를 때마다 호출되어야 합니다
키를 누를 때마다가 아닌
우리가 플레이어 이름의 변경 사항을 저장할 때만 입니다
따라서 당연히 이 App 컴포넌트 함수 내에서
우리는 새로운 함수를 아마 여기에 추가할 것입니다
이름은 handlePlayerNameChange이 될 수 있습니다
왜냐하면 그것이 최종적으로 우리가 반응하려는 것이기 때문입니다
그리고 여기서는 이름이 변경된 플레이어의 symbol(기호)와
newName을 전달 인자로 받을 것으로 생각됩니다
그리고 난 후 우리는 setPlayers를 호출합니다
따라서 이 새로 추가된 상태의
상태 업데이트 함수는 이러한 형태를 가지고 있습니다
그리고 저는 이전의 상태를 기반으로 저의 상태를 업데이트 하고 싶습니다
왜냐하면 당연히 오직 한 플레이어의 이름만이 여기서 변경되기 때문이고
다른 플레이어의 이름과 정보를
잃고 싶지 않기 때문입니다
따라서, 결론적으로 이곳에서는, prevPlayers를 얻고
새로운 상태가 될 그리고 새로운 플레이어의 상태일
새로운 객체를 반환합니다
여기에서는 이전 플레이어 객체를 펼쳐서
다시 X와 O 속성을
각각 이전 플레이어의 이름으로 설정합니다
하지만 둘 중 하나의 속성을 다시 덮어 쓸 것입니다
여기서 얻는 속성은
이 symbol 매개변수의 도움을 받습니다
우리는 이것을 자바스크립트 문법을 활용하여 할 수 있습니다
여기의 대괄호와 함께
우리는 동적으로 속성을 설정합니다
따라서 이것은 표준 자바스크립트이며 구체적으로는 리액트가 아닙니다
우리는 X 혹은 Y로,
symbol에 저장된 내용에 따라 새 이름으로 설정합니다
저는 이 접근을 통해 플레이어의 변하지 않는
이름과 기호를 유지하도록 합니다
그리고 단지 변경된 플레이어의 기호에 대한
이름을 덮어쓰는 것입니다
이제 이것이 우리가 플레이어의 데이터를 업데이트하는 방법입니다