📒[React 자습서] 3. 코드 추가

부모 Board 컴포넌트에서 자식 Square 컴포넌트로 “prop 전달”.

Square컴포넌트 하나하나가 클릭되도록

1. button에 onClick 이벤트 함수 추가

<button className="square" onClick={() => alert('click')}>

2. 클릭된 상태를 기억하는 state추가

모든 React 컴포넌트 클래스는 생성자를 가질 때, super(props) 호출 구문부터 작성해야 한다.

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

각 Square가 아닌 부모 Board 컴포넌트에 게임의 상태를 저장하자.

각 Square에 숫자를 넘겨주었을 때와 같이 Board 컴포넌트는 각 Square에게 prop을 전달하는 것으로 무엇을 표시할 지 알려줍니다.

여러개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하려면 부모 컴포넌트에 공유 state를 정의해야 합니다. 부모 컴포넌트는 props를 사용하여 자식 컴포넌트에 state를 다시 전달할 수 있습니다. 이것은 자식 컴포넌트들이 서로 또는 부모 컴포넌트와 동기화 하도록 만듭니다.

다시코드

class Square extends React.Component {

  render() {
    return (
      <button className="square"  
      onClick={()=>this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),            ........(2.1)
    };
  }
  handleClick(i){                           ........(2.4)
    const squares=this.state.squares.slice();   .........(*)
    squares[i]='X';
    this.setState({squares:squares});
  }
  renderSquare(i) {                            .....(2.3)
    return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)}/>;
  }
  
  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)} ...........(2.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 className="game">
        <div className="game-board">
          <Board />           ....................(2)
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,          ....................(1)
  document.getElementById('root')
);

(1)->(2): Game->Board 순서대로 컴포넌트
(2.1): Square가 아닌 Board에 상태 저장
(2.2): 자신의(Board) renderSquare()함수 호출
(2.3): Square컴포넌트에 Board자신의 상태(클릭여부)를 value값으로 전달하고 있으며, onClick 이벤트 함수도 자신의 handleClick(i)함수를 이용함
(2.4): Square가 클릭되었을 때, Board에 저장된 Square의 상태를 변경하는 함수
(*): 왜..?

(*) 2가지 데이터 변경 방법

var player={score:1,name:'Jeff'};

1. 데이터 값을 직접 변경

player.score=2;

2. 원하는 값을 가진 새로운 사본으로 데이터 교체

var newPlayer = Object.assign({}, player, {score: 2});

불변성:2의 장점

복잡한 특징들을 단순하게 만듦.
변화를 감지하기 쉬움.(참조하고 있는 객체가 이전 객체와 다른지 확인)
렌더링 시기를 알려줌.