[React] 게임만들기 Board에서 props 받아서 Square에 전달

Board에서 renderSquare 함수로 props 받아서 Square에 전달하기.

 

 

Board.js 수정

class Board extends React.Component {renderSquare(i) { return <Square value={i} />; }
class Board extends React.Component {renderSquare(i) { return <Square id={i} />; }

import React from 'react';
import Square from './Square';


class Board extends React.Component {
    renderSquare(i) {
      return <Square id={i} />;
    }
  
    render() {
      const status = 'Next player: X';
  
      return (
        <div>
          <div className="status">{status}</div>
          <div className="board-row">
            {this.renderSquare(1)}
            {this.renderSquare(2)}
            {this.renderSquare(3)}
          </div>
          <div className="board-row">
            {this.renderSquare(4)}
            {this.renderSquare(5)}
            {this.renderSquare(6)}
          </div>
          <div className="board-row">
            {this.renderSquare(7)}
            {this.renderSquare(8)}
            {this.renderSquare(9)}
          </div>
        </div>
      );
    }
  }
  

  export default Board;

 

 

Sqaure.js

{this.props.value} 
{this.props.id} 

import React from 'react';

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

  export default Square;

 

 

 

수정 후 !