React로 TicTackTo 만들어 State, Props 마스터하기

<script type="text/babel">

    class Square extends React.Component{
      render(){
        return(
          <button className="square"
          onClick={ ()=>{ this.props.onClick() }}
          >
          {this.props.value}
          </button>
        )
      }
    }
    
    class Board extends React.Component{

      state = {
        squares : Array(9).fill(null),
        xIsNext : true
      }

      handleClick = (i) => {

        const squares = [...this.state.squares]

        squares[i] = this.state.xIsNext ? 'O' : 'X'

        this.setState({
          squares,
          xIsNext : !this.state.xIsNext
        })

      }

      renderSquare = (i) => {
        return <Square
                onClick = { () => {this.handleClick(i)} }
                value = {this.state.squares[i]}
              />
      }

      render(){
        return(
          <div>

            <div className="board-row">
              {this.renderSquare(0)}
              {this.renderSquare(1)}
              {this.renderSquare(2)}
            </div>


            <div className="board-row">
              {this.renderSquare(3)}
              {this.renderSquare(4)}
              {this.renderSquare(5)}
            </div>

            <div className="board-row">
              {this.renderSquare(6)}
              {this.renderSquare(7)}
              {this.renderSquare(8)}
            </div>

          </div>
        )
      }
    }

    class Game extends React.Component {
      render(){
        return(
          <div>
            <div className="game">
              <div className="game-board">
                <Board />
              </div>
            </div>
          </div>
        )
      }
    }

    ReactDOM.render(<Game />, document.querySelector("#root"));
  </script>