틱택토 게임 만들기
리액트로 간단하게 틱택토 게임을 만들어보겠습니다.
우선 기본적으로 세가지 컴포넌트를 사용합니다.
- Square 컴포넌트는
<button>을 렌더링합니다.- Board는 사각형 9개를 렌더링합니다.
- Game 컴포넌트는 게임판을 렌더링하며 나중에 수정할 자리 값을 가지고 있습니다.
초기 세팅
Board
Board 컴포넌트에서 props로 Square 컴포넌트에 자리 값 데이터를 전달해줍니다.
Square
부모 컴포넌트인 Board에서 전달받은 vlaue 값을 표시하기 위해 button에 this.props.value의 값을 가져와 줍니다.
중간 확인
여기까지 코드를 작성하면 button마다 Board 컴포넌트의 각 value값들이 들어간것을 확인할 수 있습니다.
Square
이제 사용자와 상호작용을 할 수 있도록 Square 컴포넌트를 클릭하면 X 버튼이 나오게 표시하겠습니다.
먼저 state를 사용하여 Square 컴포넌트를 클릭한 것을 기억하게 만들어 'X' 표시 되도록 해주어야합니다.
Square의 현재값을 this.state에 저장하고 Square를 클릭할 경우 값을 'X'로 변경하도록 해주었습니다.
여기까지 코드를 작성하면 버튼을 클릭할 경우 X로 값이 채워지는것을 확인할 수 있습니다.
Board
이제 게임의 승자를 확인하기 위해 9개의 Square값을 한곳에서 확인해야 하는데 지금은 각각의 Square의 state값을 저장하고 있기때문에 Board 컴포넌트에서 state를 저장하여야 합니다.
Board 컴포넌트에서 state값을 저장하고 있어야하기 때문에 생성자 함수를 사용해서 9개의 버튼배열의 state 초기값을 null로 설정해주었습니다.
renderSquare의 value값도 i가 아닌 state의 따라 null이나 'X'로 표현하도록 this.state.squares[i]로 바꾸어 주었습니다.
Square
이제 Board 컴포넌트에서 state를 저장하고 있기때문에 Square 컴포넌트에서 state값을 저장하고 있지 않아도 되서 생성자 메서드를 지워줍니다.
또 Square의 상태도 스스로 저장하고 있지 않으니 Board 컴포넌트에서 props로 값을 받아서 사용하도록 변경해줍니다.
handleClick
여기까지 코드를 작성하면 버튼을 클릭할때 onClick이 정의되지 않아 오류가 발생하게 됩니다.
이제 버튼을 클릭할때 state를 'X'로 바꾸어 줄 수 있도록 handleClick 메서드를 만들어 보겠습니다.
Board
Board 컴포넌트에서 handleClick을 정의하여 Square 컴포넌트에서 Onclick 이벤트가 발동될때 해당하는 버튼의 위치의 state값을 'X' setState 해주게 될것입니다.
Square
Square 컴포넌트에서 버튼을 클릭할때 Board 컴포넌트에 있는 handleClick 메서드를 실행하게 되고 이때 해당 버튼의 위치의 값을 'X'로 바꾸어 주고 값이 바뀌게 되니 버튼을 클릭한 위치의 표시가 null에서 'X'로 바뀌게 될 것입니다.
중간 확인
버튼을 클릭할때 'X'가 표시되는것은 똑같지만 이제 state를 각 Square가 아닌 Board에서 저장하고 있게 됩니다.
handleClick 메서드에서 .slice() 를 사용하여 기존 기본 배열을 수정하지 않고 새로운 배열을 만들어서 수정을 하였습니다.
이렇게 해야하는 이유는 React에서 state가 바뀐것을 감지해야하고 그에 따라 바뀐 부분을 다시 렌더링해줘야하기 때문입니다.
- 참고
순서 만들기
이제 플레이어가 게임을 할 수 있도록 O와 X를 표시해줄것 입니다.
Board
state의 xIsNext라는 초기값을 설정해주었고 handleClick 메서드에 삼항 연산자를 넣어서 true이면 O가 표시되고 false일경우 X가 표시되게 해주고 state의 isNext를 반대값으로 지정하여 메서드가 실행될 때마다 값이 반대로 바뀌게끔 설정해주었습니다.
중간 확인
승자 가리기
이제 게임의 승자를 결정해야합니다.
메서드
대각선을 포함해 3줄 연속으로 입력된 경우의 수를 가지고 승자를 체크하는 calculateWinner 메서드를 최상단에 작성해 주었습니다.
한명이라도 승리하거나 Squares가 다 채워지면 Board의 handleClick 메서드가 실행되지 않도록 설정해주었습니다.
render( ){ }에서 승자가 있을경우 승자의 마크를 표시하고 승자가 없을 경우에는 다음 순서의 마크를 표시해주었습니다.
추가로 모든 값이 채워졌을때에도 winner가 나오지 않았다면 무승부라고 표시해주었습니다.
결과
승자가 나오지 않았을 경우
승자가 나왔을 경우
경기가 끝나도 승자가 나오지 않았을 경우
