이번 시간에 작업할 내용은
승리 조건을 만들고
같은 버튼을 여러 번
클릭할 수 없게 하는 것입니다
하지만 그 전에 이 게임판 아래에 로그(log)를
만들어 보도록 하겠습니다
이 작업을 먼저 함으로써
이 앱의 코드와 구조를
개선할 수 있기 때문입니다
지금 이 상태로도 작동이 잘 되지만
사실 리액트 코드로서는 이상적이지 않은 방향으로 가고 있습니다
특히 여기에서 기능을 더 추가한다면 문제가 커집니다
어떤 부분에 문제가 있는지 다루기 전에
먼저 로그 컴포넌트를 만들겠습니다
곧 작업할 내용이기도 하기 때문입니다
새로운 로그 파일(Log.jsx)를 만들어서
로그 컴포넌트 함수를 생성하겠습니다
그리고 이것을 내보내겠습니다
이 로그 컴포넌트는
이후에 순서 있는 목록(ordered list)을 반환할 것이고
css 스타일링의 이유로 log라는 ID를 반환하겠습니다
이것은 현재까지 게임에서 진행된 순서에 대한
반환된 정보를 보여줄 것입니다
그래서 각각의 플레이어가
어떤 수를 뒀는지를
게임 플레이 중에 확인할 수 있습니다
이 작업을 위해 여기 있는
순서에 대한 동적인 배열을 제어해야 합니다
이 배열은 버튼을 클릭할 때마다 수가 증가합니다
이것은 결국 이 상태를
제어할 수 없다는 의미로
어떤 버튼을 클릭했는지에 대한 정보는
이쪽 게임판 컴포넌트에서 생성되기 때문입니다
그래서 다시 앱 컴포넌트로 상태를 끌어올리겠습니다(lifting state)
그 이유는 이 컴포넌트가
게임판과 로그 컴포넌트에 모두 접근이 가능하기 때문입니다
즉 여기서 필요한 컴포넌트입니다
이것을 위해서 로그를 가져오겠습니다
위치는 ./components/Log.jsx입니다
그래서 상태를 끌어올리고
여기에 useState를 사용하여
순서 데이터에 대한 배열을 제어하겠습니다
여기에 함수 두 개를 사용하겠습니다
gameTurns와 setGameTurns입니다
이제 버튼 하나를 클릭할 때마다
이 배열에 순서를 하나씩 추가하겠습니다
편리한 점은
여기에 handleSelectSquare 함수가 있기 때문에
setGameTurns를 호출할 수 있습니다
이제 필요한 정보는
어떤 수가 있었는지에 대한 내용입니다
이 정보를 가져오기 전에
잠깐 진행을 멈추겠습니다
이 접근방식이 이해가 되십니까?
이미 다른 위치에서도
순서와 수에 대한 정보를 저장하고 있습니다
이것 또한 게임의 진행상황에 대한 정보입니다
그것은 바로 이 게임판 컴포넌트입니다
여기에서는 게임판을 업데이트하되
매 클릭마다 업데이트가 실행됩니다
그러므로 게임판에서
이미 진행된 수를 확인할 수 있습니다
어떤 순서로 진행되었는지는 알 수 없지만
이 버튼을 클릭했다는 것
이 버튼을 클릭했다는 것을 알 수 있고
각 버튼을 어떤 플레이어가 눌렀는지도 알 수 있습니다
이 상태에 저장된 정보가
꽤 많다는 것을 알 수 있습니다
그러므로 상태를 하나 더 만들어서
크게 다를 것 없는 정보를 또 저장하는 것은
리액트 개발자로서 가능하면 피하는 것이 좋습니다
이 작업은 간단한 일이 아니며
몇 번의 연습을 필요로 합니다
그리고 물론 여러 상태에서
똑같은 정보를 제어하고 있다고 큰 일이 일어나지는 않습니다
하지만 일반적으로는 피하는 것이 좋은 상황이고
이 프로젝트에서도 가능하면 피해 보겠습니다
그래서 이 상태를 추가하고
게임판 상태도 유지하기보다는
게임 진행상황에 대한
정보를 제어하고 있는
이 상태를 게임판 컴포넌트에서
끌어올려서 앱 컴포넌트로 보내보겠습니다
이유는 이미 언급했듯
앱 컨포넌트가
게임의 현 상태에 대한 정보가 필요한
로그 컴포넌트와 게임 컴포넌트
둘 다에 대한 접근이 가능하기 때문입니다
여기에서는 게임판 상태를
끌어올리지 않겠습니다
이 상태에는 우리가 필요한
버튼을 클릭한 순서에 대한 정보가 없기 떄문입니다
로그에 필요한 내용인데 말입니다
그러니까 일단 이 게임판 상태를 주석 처리하거나
완전히 삭제할 수도 있습니다
지금은 참고용으로 삭제하지 않겠습니다
대신 여기 있는 gameTurns 상태를 보겠습니다
여기에서 버튼을 클릭하는 것에 대한 정보를
목록으로서 제어할 수 있고
로그에 필요한 정보에 더해
게임판에 필요한 정보 또한
gameTurns에 대한 배열에서 가져올 수 있기 때문입니다