내가 이해한 틱택토 게임 = 빙고 게임이다.
게임의 규칙은 다음과 같다.
-3x3으로 시작하고 선공 X 후공 O 으로 진행한다.
-승자가 나오면 게임은 중단된다.
-한번 클릭된 버튼은 재클릭되지 않는다.
해당 게임을 만들기 위해서는 우선 페이지 영역을 나눠야 할것이다.
1. Winner 와 Next Player를 표시해주는 영역
2. 3x3 = 9칸의 빙고판
위 게임은 3개의 컴포넌트로 구성되어 있다.
Board, Game,Square
Game Component에서는 Board를 렌더하고, Board는 Square를 렌더한다.
Sqare 컴포넌트는 Button을 렌더하는 방식으로 작동한다.
이렇게 세개의 컴포넌트를 각각 작성하고
제일 밑에 Game 컴포넌트 안에 <Board />를 함으로 각각 컴포넌트가 위 설명처럼 연결된다..
1. Board Component
안에 renderSqaure 함수를 선언한다.
이 함수는 매개변수 i를 받아 후술할 Sqaure 함수에 value 라는 이름으로 값을 전달할 것이다.
onClick 이벤트 처리도 포함했다.
2. Sqaure 컴포넌트는 Board로 부터 값들을 전달 받는다.
부모 Component인 Board 에서 전달 받은 valuer 값을 표시하기 위해서 button 안에다가 this.props.value의 값을 가져와 준다.
해당 코드를 실행하면 3x3 의 화면이 출력된 것 을 확인가능하다.
3. Board 컴포넌트를 마저 작성해보자.
3-1 state 선언
선언하는 이유는 데이터가 변경될때마다 화면의 값들을 변경해주기 위해서다
그 목적을 위해 sqaures 라는 배열을 만들고 9개의 null값을 선언해주었다. (인덱스)
그리고 xIsNext라는 boolean flag역할을 할 속성을 작성했다. 이는 변경된 부분을 확인할 때 후에 이용된다.
3-2 이벤트 동작시 상태를 변경시키는 handleClick(i) 함수
우선 winner 관련된 부분은 후에 승자예측과 관련된 부분이기때문에 후술하고,
위에 코드 두줄을 살펴보면 바로위에 state에서 선언했던 squares와 xisNext의 값을 변경하여 사용하길 원하기 때문에 저런식으로 같은 컴포넌트 안에 작성했다.
state는 불변하므로 setState라는 메서드를 통해서 state의 값을 변경시킨다.
setState 메서드에서 주목할 부분은 ! 이다.
!은 not의 의미로서,
플레이어가 둘때마다 번갈아가면서 플레이하기 때문에 한번 클릭시 반대의 값을 도출하기 위해 해당코드처럼 작성하게 되었다.
그리고 중간의 삼항연산자를 설명하면 if문을 간략하게 적은것이다.
물음표 이전이 if고 그 값이 성립하면 : 앞의 값 , 그렇지 않다면 : 뒤의 값을 사용한다.
위의 코드는 xIsNext라는 boolean flag가 true이면 X,flase면 O 이다.