저번 시간에는 플레이어명을
수정할 수 있도록 작업했습니다
이제 이 플레이어 관련 기능은 완료하였고
이제 다음 빌딩 블록으로 넘어가겠습니다
바로 게임판(game board)입니다
저희의 목표는 여기에
틱택토 게임판을 구현하는 것입니다
즉 3x3 격자모양입니다
그리고 이 격자는
클릭할 수 있는 버튼을 사용해서
게임을 할 수 있도록 구성하겠습니다
일단 여기에 새 컴포넌트를 만들겠습니다
게임판 파일(Gameboard.jsx)의 컴포넌트입니다
이 컴포넌트의 목적은 격자모양 게임판을 출력하는 것입니다
즉, ol을 출력하거나
ul일 수도 있지만
크게 중요한 부분은 아닙니다
이론적으로는 순서가 필요할 것 같습니다
이 목록에는 게임판의 id를 작성하여
형식을 맞춰 주겠습니다
그리고 여기에 열(row)을 세 개 생성하고
각 열에 세 개의 행(column)을 할당하겠습니다
즉 목록 아이템 속에 ol을 하나 더 추가한 것입니다
즉 리스트 안의 리스트, 중첩 리스트 구조입니다
이 게임판 전체에 대한 코드를 직접 작성하지는 않겠습니다
단순히 일이 많아져서만은 아니고
이후에 다시 보게 되겠지만
이 게임판은 동적인 업데이트가 필요하기 때문입니다
게임판 속 정사각형 버튼을 클릭하면
그 버튼 위에 해당 플레이어의 기호를 띄워서
누가 어느 위치를 선택했는지 보여줘야 합니다
즉 이것은 동적으로 파생된 게임판이고
그런 이유로 직접 코드 작성을 하지 않겠습니다
일단은 여기에 상수를 하나 작성하겠습니다
이 컴포넌트 함수 바깥에 두겠습니다
이것이 상태(state)가 아니기 때문입니다
이 상수는 저로 하여금
특정 값을 가져오고 저장할 수 있도록 돕습니다
이름은 initialGameBoard로 하겠습니다
여기에는 배열을 포함한 배열이 필요합니다
격자가 필요하기 때문입니다
배열을 포함한 배열이 세 개 있고
각 배열은 값 세 개를 포함할 것입니다
이 부분을 완성한 후에는 게임판에
몇 정사각형은 비어 있고
즉 널(null) 값을 표현하는 것이고
몇 정사각형은 X나 O로 채워져 있을 것입니다
어떤 플레이어가 그 정사각형을 눌렀느냐에 따라 달라질 것입니다
즉 게임의 현재 상태를
이 다차원적인 배열에 저장하게 됩니다
일단은 모든 정사각형이 비어 있어야 하므로
이 배열을 포함한 배열은 널(null)로 가득 차 있어야 합니다
이제 이 초기 상태의 게임판을
동적으로 반환하고
동적으로 격자 아이템을 렌더링해 보겠습니다
여기에서 다시 .map 방식을 사용해 보겠습니다
이전 강의에서 배운 기억이 나실 겁니다
이미 배우신 대로 .map 방식은
함수를 입력으로 받되
이 함수는 해당 배열의 각 아이템에 대해
자동으로 호출됩니다
즉,각 중첩 배열에 대한 것인데
이 내부의 배열은 모두
이 바깥쪽 배열에 대한 아이템이기 때문입니다
만약 여기에 행(row)이 나온다면
이 셋이 그에 대한 행일 것입니다
각 행에 목록 아이템을 반환할 것인데
각 목록 아이템은 키(key) 즉 속성명이 필요합니다
즉 식별을 위한 고유한 이름입니다
이 배열 안의 배열에 대한 키는
아직 아주 고유해 보이지는 않습니다
일단은 두 번째 인수를 사용해 보겠습니다
매핑을 위해 전달한 이 함수에서 사용할 수 있는데
즉 아이템에 대한 인덱스(index)이고
이 함수 실행의 목적입니다
rowIndex라고 이름 붙인 이 인덱스를
값의 키로 사용해 보겠습니다
대부분의 경우 이 인덱스는 사용하지 않는 것이 좋습니다
이 인덱스는 이 값과 연결되어 있지 않기 때문입니다
만약 이 행이 다음 행과 자리를 바꾼다면
이 행의 인덱스가 0이 될 것입니다
이전의 인덱스 정보가 변경되는 것입니다
즉 인덱스는 데이터의 내용이 아닌
데이터의 위치와 연결되어 있습니다
하지만 일단 이 상황에서는 문제가 없습니다
행의 위치를 바꿀 일이 없으므로
여기에는 인덱스을 사용해도 괜찮습니다
이 목록 아이템 내부에
다른 ol을 넣는 것이 목표입니다
그 목록에서 이 안쪽 배열의 값을 반환하면서
격자 모양을 완성시킬 수 있을 것입니다
일단 현재로서는
행 몇 개가 여기에 있는 전부입니다
이 ol에도 또한
동적인 무언가를 반환하려고 하는데
그 무언가라 함은 이 행(row)입니다
이것이 안쪽 배열, 즉
이 안쪽 배열의 3회 반복입니다
여기의 안쪽 배열에 있는 아이템을
.map을 통해 검토함으로써 행과
그 인덱스를 반환 하겠습니다
이 null 값과 해당 인덱스를 가져오는 것입니다
안쪽 배열의 각각의 안쪽 값에는
다시금 배열 아이템을 반환하여
키를 colIndex에 설정하겠습니다
대문자로 수정하겠습니다
이제 배열 아이템 안에
클릭할 수 있는 버튼을 만들겠습니다
여기에 수정해야 하는 작은 오류가 있습니다
이 괄호를 여기에서 닫아야 합니다
이제 이 버튼 태그 사이에
기호가 X로 지정된 이용자가 클릭했을 경우라면
X를 반환하고
O로 지정된 이용자라면 O를 반환하도록 하겠습니다
혹은 아직 아무도 클릭하지 않았다면 비워 두어야 하므로
이것이 초기 상태(state)가 되겠습니다
버튼 태그 사이에 아무 값도 없는 것입니다
엄밀히 말하자면
여기에 반환하고자 하는 동적 값은 col (열)입니다
이 값은 처음에는 null인데
null을 그대로 반환한다면
화면에는 아무것도 보이지 않는다는 뜻입니다
여기에 괄호를 하나 더해서
이 두 개의 매개변수를 감싸겠습니다
그리고 열(col)이 적절한 이름이 아니므로
이것을 playerSymbol로 수정하겠습니다
이렇게 수정하면
버튼 태그 사이에 반환되는 것이
플레이어의 기호, 즉 playerSymbol인 것이 확실해집니다
이 작업 이후에는
이 격자를 동적으로 반환할 수 있게 됩니다
물론 현재로서는 이 내용이 수정되지는 않습니다
버튼을 클릭한다고 해서 변화가 생기지는 않고
그 변화가 게임판에 반영되지도 않습니다
현재로서는 이 격자를 반환하고 있을 뿐입니다
다시 앱 컴포넌트로 돌아가 보겠습니다
여기에서 GameBoard 컴포넌트를 가져오는데
위치는 ./components/GameBoard.jsx입니다
이 플레이스홀더를 이제
게임판 컴포넌트로 대치하겠습니다
현재로서는 아무 속성도 받고 있지 않으므로
이렇게 사용이 가능합니다
이제 이대로 저장한 후
격자 게임판이 생성된 것을 확인할 수 있고
클릭할 수 있는 버튼이 보입니다
커서의 모양이 변하므로 알 수 있습니다
물론 아직은 버튼을 클릭해도
아무 일도 일어나지 않지만
이 격자를 반환함으로써
게임 로직 작업이 본격적으로 시작되었다고 할 수 있습니다