[ReactJS] 튜토리얼(Tutorial) - 5

튜토리얼(Tutorial) - 5

state 끌어올리기(Lifting State Up)

지금 까지 과정을 잘 수행했다면 좀 더 견고한 틱택토 게임이 되어가고 있을것이다.

하지만 지금은 state가 각 Square 컴포넌트 마다 캡슐화 되어 있다.

완전하게 잘 작동하는 게임을 만들기 위해서는 플레이어가 게임에서 승리했는지 확인하고, X와 O를 놓아야한다.

다시 말해, 누가 승리 했는지 확인하려면, 어느 한 곳에서 9칸의 모든 값을 가져야한다.

이 때문에 Square의 상위 컴포넌트인 Board에서 결과값을 종합해야한다고 생각할 수 있다.

그러나 이와 같은 코딩은 기술적으로 가능하지만, 

코드를 이해하기 어렵게 만들고 리팩토링이 힘들어서 권장하지 않는다.

이 방법 대신에 해결책은, 각 Square 컴포넌트가 아닌 Board 컴포넌트에서 상태를 저장하는 것이다.

이로써, Board 컴포넌트는 각각의 Square 컴포넌트에게 어떤 상태(O,X)를 표시할것인지 알릴수 있다.

여러 하위 데이터를 집계하거나 두 하위 컴포넌트 요소가 서로 통신하게 하려면 

상위 컴포너트에서 state를 관리하게 하는 것이 좋다.

그러면 상위 컴포넌트는 props를 이용해서 하위 컴포넌트에 state를 전달할 수 있으므로

하위 컴포넌트끼리, 하위 컴포넌트와 상위 컴포넌트는 항상 동기화 시킬 수 있다.

이와 같이 state를 상위로 끌어 올리는 것(Lifting State Up)은 React 컴포넌트를 리팩토링할 때 일반적이다.

class Board extends React.Component {
  constructor() {
    super();
    this.state = {
      squares: Array(9).fill(null),
    };
  }
 
  renderSquare(i) {
    return <Square value={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)}
        </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>
    );
  }
}

Board에 constructor를 추가하고 9개의 Square에 해당하는 배열을 null로 초기화 하여 세팅한다.

각각의 배열은 Square에 대응하며 클릭할때마다 값이 null에서 O,X로 변한다.

[
  'O', null, 'X',
  'X', 'X', 'O',
  'O', null, null,                                                                                         
]

예를 들어 위와 같이 배열의 값이 바뀔 수 있는 것이다.

이 배열을 기준으로 랜더링이 이루어진다.

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

state 값이 배열로 변경되면서 renderSquare 메소드의 코드도 변경되어야한다.

위의 코드와 같이 하위 컴포넌트(Square)에 해당 인덱스의 데이터값이 전달되도록 코드를 바꿔주자.