이번 강의에서는
한 버튼을 여러 번 클릭하지 못하도록 하겠습니다
그건 게임에 도움이 되지 않고
로그(log) 양이 너무 많아지기 때문입니다
그리고 가장 중요하게는 게임 진행 방식에 어긋납니다
오늘의 과제는
같은 버튼을 여러 번 클릭할 수 없도록 하는 것입니다
이것을 위해서 GameBoard 컴포넌트를 보겠습니다
여기에서 할 작업은
한 번 선택된 버튼을 비활성화시키는 것입니다
이 버튼 컴포넌트에서
비활성화(disabled) 속성을 추가하겠습니다
버튼 컴포넌트에서 기본으로 제공하는 기능인데
HTML에서 disabled라는 특성을 설정할 수 있는 것과 같습니다
이렇게 내용을 추가하면
해당 내용은 자동으로 true가 되어서
버튼이 비활성화(disabled) 됩니다
저장 후 새로고침해 보겠습니다
버튼을 클릭할 수 없습니다
클릭을 해도 아무 일도 일어나지 않습니다
이제 이 부분을 동적으로 설정하겠습니다
만약 버튼이 이미 선택되었다면 true로 설정하는 것입니다
다른 경우에는 false로 설정해서
버튼이 활성화(active) 되게 할 것입니다
여기에서 이것의 활성화 여부에 대해
동적으로 파생시켜야 하는 조건은 무엇일까요?
바로 playerSymbol 입니다
만약 playerSymbol이 X나 O라면
해당 버튼은 이미 클릭한 것이 되고
비활성화시켜야 합니다
반대로 만약 null 상태라면
아직 활성화된 것을 알 수 있습니다
그러므로 플레이어 기호가
null 값인지 아닌지를 확인하면 됩니다
만약 null 상태가 아니라면 결국
X나 O일 것이고
즉 이미 선택되었다는 뜻이기 때문입니다
그러므로 이것이 true가 되는 조건은
이미 버튼을 눌렀을 경우입니다
그렇다면 버튼은
비활성화될 것입니다
만약 플레이어 기호가 null 상태라면
즉, 이 조건이 충족되지 않았다면
false가 되고 버튼은 활성화되지 않습니다
이제 새로고침을 해 보면
버튼을 눌러보면 누를 수 있지만
한 번 더 눌러보면
위의 플레이어 이름 강조 표시가 변하지 않고
로그 내용도 변하지 않습니다
여러 번 같은 버튼을 눌러도 동일한 결과가 보입니다
이렇게 오늘 한 작업으로
각 버튼을 한 번씩만 누를 수 있도록 조치했습니다