[React] Tic Tac Toe(틱택토) 게임 만들기 (2) - 완성

기본 구성 요소

Props를 통해 데이터 전달하기

 props는 properties의 줄임말로, 데이터를 컴포넌트에 전달할 때 사용한다.

자식 Square 컴포넌트에 value라는 props을 전달하려고 한다. 부모 Board 컴포넌트의 renderSquare 함수 코드에 value={i}를 추가한다.

아래 return문 안의 i값에 해당하는 숫자가 value prop에 담겨 전달되는 것이다.

 props는 객체 형태로 전달되며, 파라미터를 통해 조회할 수 있다. Square 컴포넌트에서 value 값을 사용하기 위해 render 함수의 {/* TODO */}를 {this.props.value}로 수정한다.

변경 후 렌더링하면 각 사각형에 숫자가 표시된다.

유저와 상호작용하는 컴포넌트 만들기

 Square 컴포넌트를 클릭하면 X가 체크되도록 한다. render() 함수의 button 태그에 onClick={() => {console.log('click');}}를 추가한다.

📌 주의할 점

onClick={() => console.log('click')}은 onClick이라는 props로 함수를 전달한다. () =>를 빼고 onClick={console.log('click')}라고 작성하지 않도록 주의해야 한다.

다음으로 Square 컴포넌트를 클릭하면 X 표시를 띄우게 하려고 한다. 이때 state라는 것을 사용하는데, 이는 동적인 값을 의미한다.

React 컴포넌트는 생성자에 this.state를 설정함으로써 state를 가질 수 있다. 먼저, Square 컴포넌트 안에 초기 this.state를 지정하는 생성자를 추가한다. 초기에는 value 값이 비공개여야 하므로 null로 지정한다.

Square을 클릭하는 경우 현재 state 값을 표시하기 위해 render 함수를 아래와 같이 수정한다.

onClick 핸들러를 onClick={() => this.setState({value: 'X'})}로 수정하고 button 태그 안 {this.props.value}를 {this.state.value}로 수정한다.

onClick 핸들러를 통해 this.setState를 호출하는 것으로 React에게 button을 클릭할 때 Square가 다시 렌더링해야 한다고 알린다. 컴포넌트에서 setState를 호출하면 React는 자동으로 컴포넌트 내부의 자식 컴포넌트까지 업데이트한다.

수정 후 Square의 {this.state.value}는 'X'가 되어 화면에 X가 나타나는 것을 확인할 수 있다.

이로써 틱택토 게임을 위한 기본 구성 요소는 갖춰진 셈이다. 이제는 게임판의 'X'와 'O'를 번갈아 표시하는 것과 승자를 결정하는 방법만 남았다.

게임 완성하기

state 끌어올리기

 현재는 state를 각각 Square 컴포넌트에서 유지하고 있지만 승자 확인을 위해 9개 사각형의 값을 한 곳에 유지하려 한다.

각각의 Square 보다 부모 Board 컴포넌트에 게임의 상태를 저장하는 것이 가장 적합하다. 위에서 Square에 숫자를 넘겨주었을 때처럼 Board 컴포넌트에서 각 Square에게 props를 전달하는 것으로 'X'와 'O' 중 무엇을 표시할 것인지를 알려준다.

여러개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하려면 부모 컴포넌트에 공유 state를 정의해야 한다. 부모 컴포넌트는 props를 사용하여 자식 컴포넌트에 state를 다시 전달할 수 있다.

 Board에 생성자를 추가하고 초기 state를 9개의 Square에 해당하는 null 배열로 설정한다.

각 Square에게 현재 값('X', 'O', 또는 null)을 표현하도록 renderSquare 함수에서 value를 value={this.state.squares[i]}로 수정한다.

이제 Square는 빈 사각형에 'X', 'O', 또는 null인 value prop을 받을 수 있게 되었다.

다음으로는 Square를 클릭할 때 발생하는 변화를 위해 Board에서 Square로 함수를 전달하고 Square는 사각형을 클릭할 때 함수를 호출하게 할 것이다.

rendarSquare 함수 내부 Square 태그에 onClick={() => this.handleClick(i)}를 추가해준다.

Square 컴포넌트에서는 render 함수 내부의 {this.state.value}를 {this.props.value}로 수정하고 this.setState()를 this.props.onClick()으로 수정한다. 그리고 Square에서 게임의 상태를 유지할 필요가 없으므로 constructor는 지워준다.

 다시 Board로 돌아가서 handleClick를 추가해준다.

화면 상으로는 이전과 다를게 없어 보이지만, 이제는 state가 각 Square 컴포넌트 대신 Board 컴포넌트에 저장된다는 것이다. Board 컴포넌트의 모든 사각형 상태를 유지하는 것으로 이후에 승자를 결정하는 것이 가능하게 되었다.

함수 컴포넌트로 바꾸기

 클래스형으로 작성된 컴포넌트를 함수 컴포넌트로 바꿔보려 한다. 함수 컴포넌트는 클래스형 보다 간단하게 컴포넌트를 작성할 수 있고 메모리 자원을 덜 사용한다는 장점이 있다.

Square 컴포넌트를 함수형으로 위와 같이 간단하게 작성할 수 있다. props 내부의 값을 조회 할 때마다 props.를 입력하는 것도 비구조화 할당 문법을 사용해 간결하게 작성하면,

이렇게 바꿀 수 있다.

 함수형 컴포넌트에서는 Hooks 기능 중 하나인 useState를 사용해 상태를 관리해야 한다. 먼저, 코드 상단에 import로 {useState}를 불러오고 상태의 기본값을 파라미터로 넣어서 호출해준다.

import {useState} from 'react';

const [state, setState] = useState();

첫번째 element는 현재 state, 두번째 element는 state를 변경시키는 함수이다. 소괄호 안에는 초기 state 값을 넣어주면 된다.

return문 안의 this도 다 없애주었다.

순서 만들기

 지금은 게임판에 'X'만 표시되지만 'X'와 'O'를 번갈아 표시할 수 있게 만들어야 한다.

 Board 컴포넌트의 초기 state 값에 xIsNext: true를 추가하고 순서가 바뀔 때마다 boolean 값을 뒤집어 state에 저장할 것이다.

handleClick 내부에 삼항연산자로 xIsNext가 true이면 'X', false이면 'O'가 표시되도록 한다. setState에는 xIsNext boolean 값을 뒤집어 저장한다. status도 Next player를 번갈아가며 표시할 수 있도록 수정하였다.

렌더링 해보면 게임판에 'X'와 'O'가 번갈아 표시되고 상단의 Next player도 바뀌는 것을 확인할 수 있다.

승자 결정하기

 게임이 끝나면 승자를 알려주어야 한다. 아래의 코드를 Board 컴포넌트 하단에 작성한다.

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

9개의 사각형 배열로 함수는 승자를 확인하여 적절한 값으로 'X', 'O', 또는 null을 반환한다.

우승 플레이어를 결정짓기 위해 Board 컴포넌트에 calculateWinner(squares)를 호출하고 'Winner: X' 또는 'Winner: O'와 같은 문구를 표시할 수 있도록 status 코드를 아래와 같이 수정한다.

그리고 승리자가 결정됐거나 Square가 승부 결정 전에 이미 다 채워졌다면 handleClick이 클릭을 무시하도록 변경한다.

승부가 결정되면 상단에 Winner가 표시되고 더 이상 게임이 진행되지 않는 것을 확인할 수 있다.