로그(Log) 작업은 잘 하셨나요?
이제 함께 적용해 보겠습니다
일단은 로그 컴포넌트에서 시작하겠습니다
일단 속성이 좀 필요한데
gameTurns를 앱 컴포넌트 내부에서
이 로그 컴포넌트로 가져오기 위함입니다
여기에서는 turns 속성을 받을 수도 있습니다
그리고 여기서 하려는 작업은
이 turns 속성을 목록 안의 목록 아이템으로 매핑하여
이 ol에 넣는 것입니다
그러므로 여기에서 차례에 대한 turn 데이터를 얻고
이 데이터는 list 항목으로 맵핑하겠습니다
여기에서는 어떤 플레이어가 어떤 필드를 선택했는지
각 필드의 행과 열 값으로 알려줄 것입니다
즉 행과 열에 대한 인덱스입니다
각각의 데이터는 이 turn에 저장됩니다
이전에 보셨든 각 차례, 그러니까 각 turn에는
이 square과 player라는 정보가 담겨져 있습니다
player는 각 플레이어의 기호에 대한 정보이고
이 로그에는 충분한 정도의 정보입니다
그러므로 여기에 turn.player이라고 작성하면
이것이 기호에 대한 내용입니다
다음으로는 selected (선택된)
그리고 여기에
turn.square.row를 반환하겠습니다
즉 이것은 행 인덱스(rowIndex) 숫자입니다
물론 열에도 똑같이 하겠습니다
중간을 쉼표로 나눌 수도 있습니다
자바스크립트에서 쉼표은 의미가 있는 기호 아닙니다
그저 화면상으로 볼 수 있는 쉼표입니다
그러면 여기에 turn.square.col이라고 쓰겠습니다
물론 여기에는 키(key)가 필요합니다
이 작업은 동적 목록을 반환할 때
꼭 필요한 작업입니다
이 키는 행과 열의 조합입니다
그것이 각 차례의 고유한 내용이기 때문입니다
즉 주어진 행-열 조합은
단 한 번만 선택할 수 있습니다
현재로서는 보시다시피
한 필드를 여러 번 클릭할 수 있습니다
이 부분을 수정하는 것입니다
이 행-열 조합을 가지고
로그에 들어오는 인풋을 고유하게 식별할 수 있습니다
이제 백틱으로 문자열을 작성해서
자바스크립트의 템플릿 리터럴을 사용하겠습니다
따옴표가 아니라 백틱이라는 기호입니다
템플릿 리터럴 문법은
자바스크립트의 문자열 생성에 사용됩니다
이 구문에서는 문자열에 값을
쉽게 넣을 수 있습니다
이것은 리액트가 아닌 자바스크립트의 문법입니다
달러 기호와 중괄호는
백틱과 함께 사용할 수 있으며
동적으로 문자열을 생성합니다
이 문자열에 넣을 첫 번째 값은
turn.square.row입니다
그 다음 두 번째는
turn.square.col입니다
즉 이것은 문자열로서
행과 열의 인덱스를 조합한 것이 되겠습니다
이것은 템플릿 리터럴 문법을 통해 만들었으며
자바스크립트의 문법입니다
이 강의에 제가 링크를 하나 첨부해 두었습니다
이 문법이 생소한 분들은 링크를 통해서 더 알아보실 수 있습니다
여기에 실제 로그 메시지가 있습니다
이 부분을 보여드리겠습니다
이제 남은 작업은
이 turns 속성이 제대로 설정되었는지 보는 것입니다
앱 컴포넌트의 로그 컴포넌트에서
turns 속성을 더하고
gameTurns 상태로 저장되어 있는 스냅샷(snapshot)을
이 속성을 통해 값으로서 컴포넌트로 전달하겠습니다
이제 저장 후 새로고침을 해 보겠습니다
버튼을 클릭하면
로그 메시지가 뜨는 것이 보입니다
이제 새로운 로그 메시지가 더해지는데
각 버튼을 누를 때마다 늘어납니다
이런 방식으로 로그 데이터를 반환할 수 있습니다
이제는 상태를 단 하나만 사용하고 있습니다
이 gameTurns 상태를 사용하여
UI의 두 부분을 업데이트한 것입니다